@vaadin/vaadin-time-picker 3.0.0-alpha1 → 3.1.0

package/@types/interfaces.d.ts

@@ -0,0 +1,13 @@
+export interface TimePickerTime {
+  hours: string | number;
+  minutes: string | number;
+  seconds?: string | number;
+  milliseconds?: string | number;
+}
+
+export interface TimePickerI18n {
+  parseTime: (time: string) => TimePickerTime | undefined;
+  formatTime: (time: TimePickerTime) => string;
+  clear: string;
+  selector: string;
+}

package/README.md

@@ -1,5 +1,8 @@
 # <vaadin-time-picker>
 
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-time-picker) monorepository.
+> This repository contains the source code and releases of `<vaadin-time-picker>` for the Vaadin versions 10 to 19.
+
 [&lt;vaadin-time-picker&gt;](https://vaadin.com/components/vaadin-time-picker) is a [Web Component](http://webcomponents.org) providing a time-selection field, part of the [Vaadin components](https://vaadin.com/components).
 
 [Live Demo ↗](https://cdn.vaadin.com/vaadin-time-picker/1.0.0/demo/)
@@ -8,12 +11,20 @@
 
 [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-time-picker)](https://www.npmjs.com/package/@vaadin/vaadin-time-picker)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-time-picker)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-time-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-time-picker)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-time-picker/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-time-picker?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-time-picker-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
+[![Discord](https://discordapp.com/api/guilds/732335336448852018/widget.png)](https://vaad.in/chat)
 
+<!--
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="vaadin-time-picker.html">
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
 ```html
 <vaadin-time-picker label="Delivery Time"></vaadin-time-picker>
 ```
@@ -22,6 +33,29 @@
 
 ## 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-time-picker`:
+
+```sh
+bower i vaadin/vaadin-time-picker --save
+```
+
+Once installed, import it in your application:
+
+```html
+<link rel="import" href="bower_components/vaadin-time-picker/vaadin-time-picker.html">
+```
+### Polymer 3 and ES Modules compatible version
+
+
 Install `vaadin-time-picker`:
 
 ```sh
@@ -44,33 +78,32 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The component with the Lumo theme:
 
-  `theme/lumo/vaadin-time-picker.js`
+  `theme/lumo/vaadin-time-picker.html`
 
 - The component with the Material theme:
 
-  `theme/material/vaadin-time-picker.js`
+  `theme/material/vaadin-time-picker.html`
 
-- Alias for `theme/lumo/vaadin-time-picker.js`:
+- Alias for `theme/lumo/vaadin-time-picker.html`:
 
-  `vaadin-time-picker.js`
+  `vaadin-time-picker.html`
 
-## Running API docs and tests in a browser
+## Running demos and tests in a browser
 
 1. Fork the `vaadin-time-picker` repository and clone it locally.
 
-1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
-
-1. Make sure you have [npm](https://www.npmjs.com/) installed.
+1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
 
-1. When in the `vaadin-time-picker` directory, run `npm install` to install dependencies.
+1. When in the `vaadin-time-picker` directory, run `npm install` and then `bower install` to install dependencies.
 
 1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
 
 1. Run `npm start`, browser will automatically open the component API documentation.
 
-1. You can also open visual tests, for example:
+1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
 
-  - http://127.0.0.1:3000/test/visual/default.html
+  - http://127.0.0.1:3000/components/vaadin-time-picker/demo
+  - http://127.0.0.1:3000/components/vaadin-time-picker/test
 
 
 ## Running tests from the command line
@@ -80,7 +113,7 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 ## 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.
+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.
 
 ## Big Thanks
 

package/package.json

@@ -1,9 +1,5 @@
 {
-  "name": "@vaadin/vaadin-time-picker",
-  "version": "3.0.0-alpha1",
   "description": "vaadin-time-picker",
-  "main": "vaadin-time-picker.js",
-  "module": "vaadin-time-picker.js",
   "keywords": [
     "Vaadin",
     "vaadin-time-picker",
@@ -12,83 +8,51 @@
     "polymer"
   ],
   "repository": "vaadin/vaadin-time-picker",
+  "homepage": "https://vaadin.com/components",
+  "name": "@vaadin/vaadin-time-picker",
+  "version": "3.1.0",
+  "main": "vaadin-time-picker.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/vaadin/vaadin-time-picker/issues"
   },
-  "homepage": "https://vaadin.com/components",
   "files": [
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "@types",
     "src",
     "theme"
   ],
-  "scripts": {
-    "analyze": "polymer analyze vaadin-* > analysis.json",
-    "check-version": "magi check-version",
-    "debug": "web-test-runner test/*.test.js --watch",
-    "dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
-    "lint": "npm run lint:js && npm run lint:css && npm run lint:types",
-    "lint:css": "stylelint src/*.js theme/**/*-styles.js",
-    "lint:js": "eslint src theme test",
-    "lint:types": "tsc",
-    "prestart": "npm run analyze",
-    "preversion": "magi update-version",
-    "screenshots": "hermione test/visual/test.js --update-refs",
-    "serve:dist": "web-dev-server --app-index dist/index.html --open",
-    "start": "web-dev-server --node-resolve --open",
-    "test": "web-test-runner test/*.test.js --coverage",
-    "test:sauce": "TEST_ENV=sauce npm test",
-    "test:visual": "hermione test/visual/test.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ]
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0"
   },
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.6.2",
+    "@polymer/iron-a11y-keys-behavior": "^3.0.0",
+    "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-element-mixin": "^2.4.1",
-    "@vaadin/vaadin-lumo-styles": "^1.6.1",
+    "@vaadin/vaadin-lumo-styles": "^1.6.0",
     "@vaadin/vaadin-material-styles": "^1.3.2",
-    "@vaadin/vaadin-text-field": "^3.0.0-alpha1",
-    "@vaadin/vaadin-combo-box": "^6.0.0-alpha1",
+    "@vaadin/vaadin-text-field": "^2.10.0",
+    "@vaadin/vaadin-combo-box": "^5.5.2",
     "@vaadin/vaadin-control-state-mixin": "^2.2.2"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.1.5",
-    "@open-wc/rollup-plugin-html": "^1.2.5",
-    "@open-wc/testing-helpers": "^1.8.0",
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@web/dev-server": "^0.0.19",
-    "@web/test-runner": "^0.9.7",
-    "@web/test-runner-saucelabs": "^0.1.1",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "hermione": "^3.0.1",
-    "hermione-esm": "^0.4.0",
-    "hermione-sauce": "^0.1.0",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.5.1",
-    "magi-cli": "^0.28.0",
-    "prettier": "^2.1.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.34.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "sinon": "^9.2.0",
-    "stylelint": "^13.7.1",
-    "stylelint-config-vaadin": "^0.2.6",
-    "typescript": "^4.0.5"
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "wct-browser-legacy": "^1.0.1",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0",
+    "@polymer/iron-form": "^3.0.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-time-picker-text-field.js

@@ -1,47 +1,51 @@
 /**
- * @license
- * Copyright (c) 2020 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+@license
+Copyright (c) 2018 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
 import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 
-registerStyles(
-  'vaadin-time-picker-text-field',
-  css`
-    :host([dir='rtl']) [part='input-field'] {
-      direction: ltr;
-    }
+const $_documentContainer = document.createElement('template');
 
-    :host([dir='rtl']) [part='value']::placeholder {
-      direction: rtl;
-      text-align: left;
-    }
+$_documentContainer.innerHTML = `<dom-module id="vaadin-time-picker-text-field-styles" theme-for="vaadin-time-picker-text-field">
+  <template>
+    <style>
+      :host([dir="rtl"]) [part="input-field"] {
+        direction: ltr;
+      }
 
-    :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
-      direction: rtl;
-      text-align: left;
-    }
+      :host([dir="rtl"]) [part="value"]::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
 
-    :host([dir='rtl']) [part='value']:-ms-input-placeholder,
-    :host([dir='rtl']) [part='input-field'] ::slotted(input):-ms-input-placeholder {
-      direction: rtl;
-      text-align: left;
-    }
-  `,
-  { moduleId: 'vaadin-time-picker-text-field-styles' }
-);
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
 
+      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
 /**
- * The text-field element.
- *
- * ### Styling
- *
- * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
- * for `<vaadin-time-picker-text-field>` parts and available slots (prefix, suffix etc.)
- *
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
- */
+  * The text-field element.
+  *
+  * ### Styling
+  *
+  * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
+  * for `<vaadin-time-picker-text-field>` parts and available slots (prefix, suffix etc.)
+  *
+  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
+  *
+  * @extends PolymerElement
+  */
 class TimePickerTextFieldElement extends TextFieldElement {
   static get is() {
     return 'vaadin-time-picker-text-field';

package/src/vaadin-time-picker.d.ts

@@ -1,10 +1,28 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   src/vaadin-time-picker.js
+ */
+
 
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+// tslint:disable:variable-name Describing an API that's defined elsewhere.
+// tslint:disable:no-any describes the API as best we are able today
 
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
 
-import { TimePickerEventMap, TimePickerI18n, TimePickerTime } from './interfaces';
+import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
+
+import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
+
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {ControlStateMixin} from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
 
 /**
  * `<vaadin-time-picker>` is a Web Component providing a time-selection field.
@@ -51,7 +69,12 @@ import { TimePickerEventMap, TimePickerI18n, TimePickerTime } from './interfaces
  * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
  * propagated to the internal themable components listed above.
  */
-declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(HTMLElement))) {
+declare class TimePickerElement extends
+  ElementMixin(
+  ControlStateMixin(
+  ThemableMixin(
+  PolymerElement))) {
+
   /**
    * Focusable element used by vaadin-control-state-mixin
    */
@@ -65,7 +88,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
   /**
    * The name of this element.
    */
-  name: string | null | undefined;
+  name: string|null|undefined;
 
   /**
    * The time value for this element.
@@ -80,7 +103,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
   /**
    * The label for this element.
    */
-  label: string | null | undefined;
+  label: string|null|undefined;
 
   /**
    * Set to true to mark the input as required.
@@ -91,24 +114,24 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
    * Set to true to prevent the user from entering invalid input.
    * @attr {boolean} prevent-invalid-input
    */
-  preventInvalidInput: boolean | null | undefined;
+  preventInvalidInput: boolean|null|undefined;
 
   /**
    * A pattern to validate the `input` with.
    */
-  pattern: string | null | undefined;
+  pattern: string|null|undefined;
 
   /**
    * The error message to display when the input is invalid.
    * @attr {string} error-message
    */
-  errorMessage: string | null | undefined;
+  errorMessage: string|null|undefined;
 
   /**
    * String used for the helper text.
    * @attr {string} helper-text
    */
-  helperText: string | null | undefined;
+  helperText: string|null|undefined;
 
   /**
    * A placeholder string in addition to the label.
@@ -145,6 +168,11 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
    */
   max: string;
 
+  /**
+   * When true, the input element has a non-empty value entered by the user.
+   */
+  _hasInputValue: boolean|null|undefined;
+
   /**
    * Specifies the number of valid intervals in a day used for
    * configuring the items displayed in the selection box.
@@ -161,7 +189,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
    * fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
    * not recommended to use it for better UX experience.
    */
-  step: number | null | undefined;
+  step: number|null|undefined;
 
   /**
    * Set to true to display the clear icon which clears the input.
@@ -173,7 +201,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
    * Set true to prevent the overlay from opening automatically.
    * @attr {boolean} auto-open-disabled
    */
-  autoOpenDisabled: boolean | null | undefined;
+  autoOpenDisabled: boolean|null|undefined;
 
   /**
    * The object used to localize this component.
@@ -206,13 +234,21 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
    *           }
    */
   i18n: TimePickerI18n;
+  ready(): void;
+  _getInputElement(): any;
+  _setInvalid(invalid: boolean): void;
 
-  _getInputElement(): HTMLElement;
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Validates the field and sets the `invalid` property based on the result.
    *
-   * @returns True if the value is valid and sets the `invalid` flag appropriately
+   * The method fires a `validated` event with the result of the validation.
+   *
+   * @returns True if the value is valid.
    */
   validate(): boolean;
 
@@ -232,24 +268,17 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
    * @returns True if the value is valid
    */
   checkValidity(): boolean;
-
-  addEventListener<K extends keyof TimePickerEventMap>(
-    type: K,
-    listener: (this: TimePickerElement, ev: TimePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof TimePickerEventMap>(
-    type: K,
-    listener: (this: TimePickerElement, ev: TimePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
 }
 
 declare global {
+
   interface HTMLElementTagNameMap {
-    'vaadin-time-picker': TimePickerElement;
+    "vaadin-time-picker": TimePickerElement;
   }
 }
 
-export { TimePickerElement };
+export {TimePickerElement};
+
+import {TimePickerI18n} from '../@types/interfaces';
+
+import {TimePickerTime} from '../@types/interfaces';

package/src/vaadin-time-picker.js

@@ -1,14 +1,17 @@
 /**
- * @license
- * Copyright (c) 2020 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+@license
+Copyright (c) 2018 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
 import '@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js';
+import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
 import './vaadin-time-picker-text-field.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
 
 /**
  * `<vaadin-time-picker>` is a Web Component providing a time-selection field.
@@ -55,85 +58,53 @@ import './vaadin-time-picker-text-field.js';
  * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
  * propagated to the internal themable components listed above.
  *
- * @extends HTMLElement
+ * @extends PolymerElement
  * @mixes ElementMixin
  * @mixes ControlStateMixin
  * @mixes ThemableMixin
+ * @demo demo/index.html
  */
-class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(PolymerElement))) {
+class TimePickerElement extends
+  ElementMixin(
+    ControlStateMixin(
+      ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
+    <style>
+      :host {
+        display: inline-block;
+      }
 
-        :host([hidden]) {
-          display: none !important;
-        }
+      :host([hidden]) {
+        display: none !important;
+      }
 
-        [part~='toggle-button'] {
-          cursor: pointer;
-        }
+      [part~="toggle-button"] {
+        cursor: pointer;
+      }
 
-        .input {
-          width: 100%;
-          min-width: 0;
-        }
-      </style>
-      <vaadin-combo-box-light
-        allow-custom-value=""
-        item-label-path="value"
-        filtered-items="[[__dropdownItems]]"
-        disabled="[[disabled]]"
-        readonly="[[readonly]]"
-        auto-open-disabled="[[autoOpenDisabled]]"
-        dir="ltr"
-        theme$="[[theme]]"
-      >
-        <template> [[item.label]] </template>
-        <vaadin-time-picker-text-field
-          class="input"
-          name="[[name]]"
-          invalid="[[invalid]]"
-          autocomplete="off"
-          label="[[label]]"
-          required="[[required]]"
-          disabled="[[disabled]]"
-          prevent-invalid-input="[[preventInvalidInput]]"
-          pattern="[[pattern]]"
-          error-message="[[errorMessage]]"
-          autofocus="[[autofocus]]"
-          placeholder="[[placeholder]]"
-          readonly="[[readonly]]"
-          role="application"
-          aria-live="assertive"
-          min$="[[min]]"
-          max$="[[max]]"
-          aria-label$="[[label]]"
-          clear-button-visible="[[clearButtonVisible]]"
-          i18n="[[i18n]]"
-          helper-text="[[helperText]]"
-          theme$="[[theme]]"
-        >
-          <slot name="helper" slot="helper">[[helperText]]</slot>
-          <span
-            slot="suffix"
-            part="toggle-button"
-            class="toggle-button"
-            role="button"
-            aria-label$="[[i18n.selector]]"
-          ></span>
-        </vaadin-time-picker-text-field>
-      </vaadin-combo-box-light>
-    `;
+      .input {
+        width: 100%;
+        min-width: 0;
+      }
+    </style>
+    <vaadin-combo-box-light allow-custom-value="" item-label-path="value" filtered-items="[[__dropdownItems]]" disabled="[[disabled]]" readonly="[[readonly]]" auto-open-disabled="[[autoOpenDisabled]]" dir="ltr" theme\$="[[theme]]" on-has-input-value-changed="__onComboBoxHasInputValueChanged">
+      <template>
+        [[item.label]]
+      </template>
+      <vaadin-time-picker-text-field class="input" name="[[name]]" invalid="[[invalid]]" autocomplete="off" label="[[label]]" required="[[required]]" disabled="[[disabled]]" prevent-invalid-input="[[preventInvalidInput]]" pattern="[[pattern]]" error-message="[[errorMessage]]" autofocus="[[autofocus]]" placeholder="[[placeholder]]" readonly="[[readonly]]" role="application" aria-live="assertive" min\$="[[min]]" max\$="[[max]]" aria-label\$="[[label]]" clear-button-visible="[[clearButtonVisible]]" i18n="[[i18n]]" helper-text="[[helperText]]" theme\$="[[theme]]">
+        <slot name="helper" slot="helper">[[helperText]]</slot>
+        <span slot="suffix" part="toggle-button" class="toggle-button" role="button" aria-label\$="[[i18n.selector]]"></span>
+      </vaadin-time-picker-text-field>
+    </vaadin-combo-box-light>
+`;
   }
 
   static get is() {
     return 'vaadin-time-picker';
   }
   static get version() {
-    return '3.0.0-alpha1';
+    return '3.1.0';
   }
 
   static get properties() {
@@ -260,7 +231,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
        */
       min: {
         type: String,
-        value: '00:00:00.000'
+        value: '00:00:00.000',
       },
 
       /**
@@ -274,7 +245,17 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
        */
       max: {
         type: String,
-        value: '23:59:59.999'
+        value: '23:59:59.999',
+      },
+
+      /**
+       * When true, the input element has a non-empty value entered by the user.
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
       },
 
       /**
@@ -362,19 +343,17 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
               // Always display hour and minute
               let timeString = `${pad(time.hours)}:${pad(time.minutes)}`;
               // Adding second and millisecond depends on resolution
-              time.seconds !== undefined && (timeString += `:${pad(time.seconds)}`);
-              time.milliseconds !== undefined && (timeString += `.${pad(time.milliseconds, '000')}`);
+              (time.seconds !== undefined) && (timeString += `:${pad(time.seconds)}`);
+              (time.milliseconds !== undefined) && (timeString += `.${pad(time.milliseconds, '000')}`);
               return timeString;
             },
-            parseTime: (text) => {
+            parseTime: text => {
               // Parsing with RegExp to ensure correct format
               const MATCH_HOURS = '(\\d|[0-1]\\d|2[0-3])';
               const MATCH_MINUTES = '(\\d|[0-5]\\d)';
               const MATCH_SECONDS = MATCH_MINUTES;
               const MATCH_MILLISECONDS = '(\\d{1,3})';
-              const re = new RegExp(
-                `^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`
-              );
+              const re = new RegExp(`^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`);
               const parts = re.exec(text);
               if (parts) {
                 // Allows setting the milliseconds with hundreds and tens precision
@@ -383,7 +362,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
                     parts[4] += '0';
                   }
                 }
-                return { hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4] };
+                return {hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4]};
               }
             },
             selector: 'Time selector',
@@ -395,7 +374,9 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
   }
 
   static get observers() {
-    return ['__updateDropdownItems(i18n.*, min, max, step)'];
+    return [
+      '__updateDropdownItems(i18n.*, min, max, step)'
+    ];
   }
 
   /** @protected */
@@ -407,14 +388,14 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
 
     // Not using declarative because we receive an event before text-element shadow is ready,
     // thus querySelector in textField.focusElement raises an undefined exception on validate
-    this.__dropdownElement.addEventListener('value-changed', (e) => this.__onInputChange(e));
+    this.__dropdownElement.addEventListener('value-changed', e => this.__onInputChange(e));
     this.__inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));
 
     // Validation listeners
-    this.__dropdownElement.addEventListener('change', () => this.validate());
-    this.__inputElement.addEventListener('blur', () => this.validate());
+    this.__dropdownElement.addEventListener('change', e => this.validate());
+    this.__inputElement.addEventListener('blur', e => this.validate());
 
-    this.__dropdownElement.addEventListener('change', (e) => {
+    this.__dropdownElement.addEventListener('change', e => {
       // `vaadin-combo-box-light` forwards 'change' event from text-field.
       // So we need to filter out in order to avoid duplicates.
       if (e.composedPath()[0] !== this.__inputElement) {
@@ -423,23 +404,35 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
     });
   }
 
+  /**
+   * Observer to notify about the change of private property.
+   *
+   * @private
+   */
+  _hasInputValueChanged(hasValue, oldHasValue) {
+    if (hasValue || oldHasValue) {
+      this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+    }
+  }
+
   /** @private */
   __validDayDivisor(step) {
     // valid if undefined, or exact divides a day, or has millisecond resolution
-    return !step || (24 * 3600) % step === 0 || (step < 1 && ((step % 1) * 1000) % 1 === 0);
+    return !step || 24 * 3600 % step === 0 || (step < 1 && step % 1 * 1000 % 1 === 0);
   }
 
   /** @private */
   __onKeyDown(e) {
+
     if (this.readonly || this.disabled || this.__dropdownItems.length) {
       return;
     }
 
-    const stepResolution = (this.__validDayDivisor(this.step) && this.step) || 60;
+    const stepResolution = this.__validDayDivisor(this.step) && this.step || 60;
 
-    if (e.keyCode === 40) {
+    if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'down')) {
       this.__onArrowPressWithStep(-stepResolution);
-    } else if (e.keyCode === 38) {
+    } else if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'up')) {
       this.__onArrowPressWithStep(stepResolution);
     }
   }
@@ -454,7 +447,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
 
   /** @private */
   __dispatchChange() {
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
   }
 
   /**
@@ -462,10 +455,10 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
    * @private
    */
   __getMsec(obj) {
-    let result = ((obj && obj.hours) || 0) * 60 * 60 * 1000;
-    result += ((obj && obj.minutes) || 0) * 60 * 1000;
-    result += ((obj && obj.seconds) || 0) * 1000;
-    result += (obj && parseInt(obj.milliseconds)) || 0;
+    let result = (obj && obj.hours || 0) * 60 * 60 * 1000;
+    result += (obj && obj.minutes || 0) * 60 * 1000;
+    result += (obj && obj.seconds || 0) * 1000;
+    result += (obj && parseInt(obj.milliseconds) || 0);
 
     return result;
   }
@@ -475,10 +468,10 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
    * @private
    */
   __getSec(obj) {
-    let result = ((obj && obj.hours) || 0) * 60 * 60;
-    result += ((obj && obj.minutes) || 0) * 60;
-    result += (obj && obj.seconds) || 0;
-    result += (obj && obj.milliseconds / 1000) || 0;
+    let result = (obj && obj.hours || 0) * 60 * 60;
+    result += (obj && obj.minutes || 0) * 60;
+    result += (obj && obj.seconds || 0);
+    result += (obj && obj.milliseconds / 1000 || 0);
 
     return result;
   }
@@ -512,7 +505,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
     var ss = Math.floor(msec / 1000);
     msec -= ss * 1000;
 
-    return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
+    return {hours: (hh < 24) ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec};
   }
 
   /** @private */
@@ -554,7 +547,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
       const timeObj = this.__validateTime(this.__addStep(time * 1000, step));
       time += step;
       const formatted = this.i18n.formatTime(timeObj);
-      generatedList.push({ label: formatted, value: formatted });
+      generatedList.push({label: formatted, value: formatted});
     }
 
     return generatedList;
@@ -578,7 +571,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
 
   /** @private */
   __valueChanged(value, oldValue) {
-    const parsedObj = (this.__memoValue = this.__parseISO(value));
+    const parsedObj = this.__memoValue = this.__parseISO(value);
     const newValue = this.__formatISO(parsedObj) || '';
 
     if (this.value !== '' && this.value !== null && !parsedObj) {
@@ -591,7 +584,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
   }
 
   /** @private */
-  __onInputChange() {
+  __onInputChange(e) {
     const parsedObj = this.i18n.parseTime(this.__dropdownElement.value);
     const newValue = this.i18n.formatTime(parsedObj) || '';
 
@@ -644,7 +637,6 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
       // Accept milliseconds
       return 4;
     }
-    return undefined;
   }
 
   /** @private */
@@ -671,7 +663,8 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
 
   /** @private */
   get __dropdownElement() {
-    return this.__memoDropdown || (this.__memoDropdown = this.shadowRoot.querySelector('vaadin-combo-box-light'));
+    return this.__memoDropdown ||
+      (this.__memoDropdown = this.shadowRoot.querySelector('vaadin-combo-box-light'));
   }
 
   /**
@@ -684,12 +677,47 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
   }
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Synchronizes the `_hasInputValue` property with the internal combo-box's one.
+   *
+   * @private
+   */
+  __onComboBoxHasInputValueChanged() {
+    this._hasInputValue = this.__dropdownElement._hasInputValue;
+  }
+
+  /**
+   * @param {boolean} invalid
+   * @protected
+   */
+  _setInvalid(invalid) {
+    if (this._shouldSetInvalid(invalid)) {
+      this.invalid = invalid;
+    }
+  }
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   *
+   * @param {boolean} _invalid
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetInvalid(_invalid) {
+    return true;
+  }
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
    *
-   * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
+   * @return {boolean} True if the value is valid.
    */
   validate() {
-    return !(this.invalid = !this.checkValidity());
+    const isValid = this.checkValidity();
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   /**
@@ -703,10 +731,8 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
     const parsedMin = this.i18n.parseTime(this.min);
     const parsedMax = this.i18n.parseTime(this.max);
 
-    return (
-      (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
-      (!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax))
-    );
+    return (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
+      (!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax));
   }
 
   /**
@@ -717,17 +743,17 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
    * @return {boolean} True if the value is valid
    */
   checkValidity() {
-    return !!(
-      this.__inputElement.focusElement.checkValidity() &&
+    return !!(this.__inputElement.focusElement.checkValidity() &&
       (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
-      (!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value))
-    );
+      (!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value)));
   }
 
   /**
-   * Fired when the user commits a value change.
+   * Fired whenever the field is validated.
    *
-   * @event change
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
    */
 }
 

package/theme/lumo/vaadin-time-picker-styles.js

@@ -1,14 +1,16 @@
 import '@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js';
 import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-registerStyles(
-  'vaadin-time-picker',
-  css`
-    [part~='toggle-button']::before {
-      content: var(--lumo-icons-clock);
-    }
-  `,
-  { include: ['lumo-field-button'], moduleId: 'lumo-time-picker' }
-);
+const $_documentContainer = html`<dom-module id="lumo-time-picker" theme-for="vaadin-time-picker">
+  <template>
+    <style include="lumo-field-button">
+      [part~="toggle-button"]::before {
+        content: var(--lumo-icons-clock);
+      }
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);

package/theme/lumo/vaadin-time-picker-text-field-styles.js

@@ -1,18 +1,21 @@
 import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-registerStyles(
-  'vaadin-time-picker-text-field',
-  css`
-    :host([dir='rtl']) [part='value']:placeholder-shown,
-    :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
-      --_lumo-text-field-overflow-mask-image: none;
-    }
+const $_documentContainer = html`<dom-module id="lumo-time-picker-text-field" theme-for="vaadin-time-picker-text-field">
+  <template>
+    <style>
+      :not(*):placeholder-shown, /* to prevent broken styles on IE */
+      :host([dir="rtl"]) [part="value"]:placeholder-shown,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
 
-    :host([dir='rtl']) [part='value'],
-    :host([dir='rtl']) [part='input-field'] ::slotted(input) {
-      --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-    }
-  `,
-  { moduleId: 'lumo-time-picker-text-field' }
-);
+      :host([dir="rtl"]) [part="value"],
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
+        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+      }
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);

package/theme/material/vaadin-time-picker-styles.js

@@ -2,14 +2,16 @@ import '@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light.js';
 import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/vaadin-material-styles/mixins/field-button.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-registerStyles(
-  'vaadin-time-picker',
-  css`
-    [part~='toggle-button']::before {
-      content: var(--material-icons-clock);
-    }
-  `,
-  { include: ['material-field-button'], moduleId: 'material-time-picker' }
-);
+const $_documentContainer = html`<dom-module id="material-time-picker" theme-for="vaadin-time-picker">
+  <template>
+    <style include="material-field-button">
+      [part~="toggle-button"]::before {
+        content: var(--material-icons-clock);
+      }
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);

package/vaadin-time-picker.d.ts

@@ -1,2 +1,15 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   vaadin-time-picker.js
+ */
+
+
+// tslint:disable:variable-name Describing an API that's defined elsewhere.
+
 export * from './src/vaadin-time-picker.js';
-export * from './src/interfaces';
+export * from './@types/interfaces';

package/src/interfaces.d.ts

@@ -1,31 +0,0 @@
-export interface TimePickerTime {
-  hours: string | number;
-  minutes: string | number;
-  seconds?: string | number;
-  milliseconds?: string | number;
-}
-
-export interface TimePickerI18n {
-  parseTime: (time: string) => TimePickerTime | undefined;
-  formatTime: (time: TimePickerTime) => string;
-  clear: string;
-  selector: string;
-}
-
-/**
- * Fired when the `invalid` property changes.
- */
-export type TimePickerInvalidChanged = CustomEvent<{ value: boolean; path: 'invalid' }>;
-
-/**
- * Fired when the `value` property changes.
- */
-export type TimePickerValueChanged = CustomEvent<{ value: string; path: 'value' }>;
-
-export interface TimePickerElementEventMap {
-  'invalid-changed': TimePickerInvalidChanged;
-
-  'value-changed': TimePickerValueChanged;
-}
-
-export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerElementEventMap {}