@vaadin/vaadin-time-picker 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/@types/interfaces.d.ts +13 -0
  2. package/README.md +49 -16
  3. package/package.json +25 -61
  4. package/src/vaadin-time-picker-text-field.js +41 -31
  5. package/src/vaadin-time-picker.d.ts +59 -34
  6. package/src/vaadin-time-picker.js +142 -120
  7. package/theme/lumo/vaadin-time-picker-styles.js +12 -10
  8. package/theme/lumo/vaadin-time-picker-text-field-styles.js +18 -15
  9. package/theme/material/vaadin-time-picker-styles.js +12 -10
  10. package/vaadin-time-picker.d.ts +14 -1
  11. package/src/interfaces.d.ts +0 -31
package/@types/interfaces.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export interface TimePickerTime {
2
+ hours: string | number;
3
+ minutes: string | number;
4
+ seconds?: string | number;
5
+ milliseconds?: string | number;
6
+ }
7
+
8
+ export interface TimePickerI18n {
9
+ parseTime: (time: string) => TimePickerTime | undefined;
10
+ formatTime: (time: TimePickerTime) => string;
11
+ clear: string;
12
+ selector: string;
13
+ }
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # <vaadin-time-picker>
2
2
 
3
+ > ⚠️ 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.
4
+ > This repository contains the source code and releases of `<vaadin-time-picker>` for the Vaadin versions 10 to 19.
5
+
3
6
  [&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).
4
7
 
5
8
  [Live Demo ↗](https://cdn.vaadin.com/vaadin-time-picker/1.0.0/demo/)
@@ -8,12 +11,20 @@
8
11
 
9
12
  [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-time-picker)](https://www.npmjs.com/package/@vaadin/vaadin-time-picker)
10
13
  [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-time-picker)
11
- [![Build Status](https://travis-ci.org/vaadin/vaadin-time-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-time-picker)
12
- [![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)
13
- [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
14
14
  [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
15
- [![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)
15
+ [![Discord](https://discordapp.com/api/guilds/732335336448852018/widget.png)](https://vaad.in/chat)
16
16
 
17
+ <!--
18
+ ```
19
+ <custom-element-demo>
20
+ <template>
21
+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
22
+ <link rel="import" href="vaadin-time-picker.html">
23
+ <next-code-block></next-code-block>
24
+ </template>
25
+ </custom-element-demo>
26
+ ```
27
+ -->
17
28
  ```html
18
29
  <vaadin-time-picker label="Delivery Time"></vaadin-time-picker>
19
30
  ```
@@ -22,6 +33,29 @@
22
33
 
23
34
  ## Installation
24
35
 
36
+ The Vaadin components are distributed as Bower and npm packages.
37
+ Please note that the version range is the same, as the API has not changed.
38
+ You should not mix Bower and npm versions in the same application, though.
39
+
40
+ Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
41
+ are only published on npm, not pushed to GitHub repositories.
42
+
43
+ ### Polymer 2 and HTML Imports compatible version
44
+
45
+ Install `vaadin-time-picker`:
46
+
47
+ ```sh
48
+ bower i vaadin/vaadin-time-picker --save
49
+ ```
50
+
51
+ Once installed, import it in your application:
52
+
53
+ ```html
54
+ <link rel="import" href="bower_components/vaadin-time-picker/vaadin-time-picker.html">
55
+ ```
56
+ ### Polymer 3 and ES Modules compatible version
57
+
58
+
25
59
  Install `vaadin-time-picker`:
26
60
 
27
61
  ```sh
@@ -44,33 +78,32 @@ To use the Material theme, import the correspondent file from the `theme/materia
44
78
 
45
79
  - The component with the Lumo theme:
46
80
 
47
- `theme/lumo/vaadin-time-picker.js`
81
+ `theme/lumo/vaadin-time-picker.html`
48
82
 
49
83
  - The component with the Material theme:
50
84
 
51
- `theme/material/vaadin-time-picker.js`
85
+ `theme/material/vaadin-time-picker.html`
52
86
 
53
- - Alias for `theme/lumo/vaadin-time-picker.js`:
87
+ - Alias for `theme/lumo/vaadin-time-picker.html`:
54
88
 
55
- `vaadin-time-picker.js`
89
+ `vaadin-time-picker.html`
56
90
 
57
- ## Running API docs and tests in a browser
91
+ ## Running demos and tests in a browser
58
92
 
59
93
  1. Fork the `vaadin-time-picker` repository and clone it locally.
60
94
 
61
- 1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
62
-
63
- 1. Make sure you have [npm](https://www.npmjs.com/) installed.
95
+ 1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
64
96
 
65
- 1. When in the `vaadin-time-picker` directory, run `npm install` to install dependencies.
97
+ 1. When in the `vaadin-time-picker` directory, run `npm install` and then `bower install` to install dependencies.
66
98
 
67
99
  1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
68
100
 
69
101
  1. Run `npm start`, browser will automatically open the component API documentation.
70
102
 
71
- 1. You can also open visual tests, for example:
103
+ 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
72
104
 
73
- - http://127.0.0.1:3000/test/visual/default.html
105
+ - http://127.0.0.1:3000/components/vaadin-time-picker/demo
106
+ - http://127.0.0.1:3000/components/vaadin-time-picker/test
74
107
 
75
108
 
76
109
  ## Running tests from the command line
@@ -80,7 +113,7 @@ To use the Material theme, import the correspondent file from the `theme/materia
80
113
 
81
114
  ## Following the coding style
82
115
 
83
- 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.
116
+ 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.
84
117
 
85
118
  ## Big Thanks
86
119
 
package/package.json CHANGED
@@ -1,9 +1,5 @@
1
1
  {
2
- "name": "@vaadin/vaadin-time-picker",
3
- "version": "3.0.0",
4
2
  "description": "vaadin-time-picker",
5
- "main": "vaadin-time-picker.js",
6
- "module": "vaadin-time-picker.js",
7
3
  "keywords": [
8
4
  "Vaadin",
9
5
  "vaadin-time-picker",
@@ -12,83 +8,51 @@
12
8
  "polymer"
13
9
  ],
14
10
  "repository": "vaadin/vaadin-time-picker",
11
+ "homepage": "https://vaadin.com/components",
12
+ "name": "@vaadin/vaadin-time-picker",
13
+ "version": "3.1.0",
14
+ "main": "vaadin-time-picker.js",
15
15
  "author": "Vaadin Ltd",
16
16
  "license": "Apache-2.0",
17
17
  "bugs": {
18
18
  "url": "https://github.com/vaadin/vaadin-time-picker/issues"
19
19
  },
20
- "homepage": "https://vaadin.com/components",
21
20
  "files": [
22
21
  "vaadin-*.d.ts",
23
22
  "vaadin-*.js",
23
+ "@types",
24
24
  "src",
25
25
  "theme"
26
26
  ],
27
- "scripts": {
28
- "analyze": "polymer analyze vaadin-* > analysis.json",
29
- "check-version": "magi check-version",
30
- "debug": "web-test-runner test/*.test.js --watch",
31
- "dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
32
- "lint": "npm run lint:js && npm run lint:css && npm run lint:types",
33
- "lint:css": "stylelint src/*.js theme/**/*-styles.js",
34
- "lint:js": "eslint src theme test",
35
- "lint:types": "tsc",
36
- "prestart": "npm run analyze",
37
- "preversion": "magi update-version",
38
- "screenshots": "hermione test/visual/test.js --update-refs",
39
- "serve:dist": "web-dev-server --app-index dist/index.html --open",
40
- "start": "web-dev-server --node-resolve --open",
41
- "test": "web-test-runner test/*.test.js --coverage",
42
- "test:sauce": "TEST_ENV=sauce npm test",
43
- "test:visual": "hermione test/visual/test.js"
44
- },
45
- "husky": {
46
- "hooks": {
47
- "pre-commit": "lint-staged"
48
- }
49
- },
50
- "lint-staged": {
51
- "*.js": [
52
- "eslint --fix",
53
- "prettier --write"
54
- ]
27
+ "resolutions": {
28
+ "inherits": "2.0.3",
29
+ "samsam": "1.1.3",
30
+ "supports-color": "3.1.2",
31
+ "type-detect": "1.0.0"
55
32
  },
56
33
  "dependencies": {
57
34
  "@polymer/polymer": "^3.0.0",
58
- "@vaadin/vaadin-themable-mixin": "^1.6.2",
35
+ "@polymer/iron-a11y-keys-behavior": "^3.0.0",
36
+ "@vaadin/vaadin-themable-mixin": "^1.6.1",
59
37
  "@vaadin/vaadin-element-mixin": "^2.4.1",
60
- "@vaadin/vaadin-lumo-styles": "^1.6.1",
38
+ "@vaadin/vaadin-lumo-styles": "^1.6.0",
61
39
  "@vaadin/vaadin-material-styles": "^1.3.2",
62
- "@vaadin/vaadin-text-field": "^3.0.0",
63
- "@vaadin/vaadin-combo-box": "^6.0.0",
40
+ "@vaadin/vaadin-text-field": "^2.10.0",
41
+ "@vaadin/vaadin-combo-box": "^5.5.2",
64
42
  "@vaadin/vaadin-control-state-mixin": "^2.2.2"
65
43
  },
66
44
  "devDependencies": {
67
- "@esm-bundle/chai": "^4.1.5",
68
- "@open-wc/rollup-plugin-html": "^1.2.5",
69
- "@open-wc/testing-helpers": "^1.8.0",
45
+ "@web-padawan/gen-typescript-declarations": "^1.6.2",
46
+ "web-component-tester": "6.9.2",
70
47
  "@polymer/iron-component-page": "^4.0.0",
71
48
  "@polymer/iron-test-helpers": "^3.0.0",
72
- "@rollup/plugin-node-resolve": "^11.0.0",
73
- "@web/dev-server": "^0.0.19",
74
- "@web/test-runner": "^0.9.7",
75
- "@web/test-runner-saucelabs": "^0.1.1",
76
- "eslint": "^7.13.0",
77
- "eslint-config-prettier": "^6.15.0",
78
- "eslint-plugin-prettier": "^3.1.4",
79
- "hermione": "^3.0.1",
80
- "hermione-esm": "^0.4.0",
81
- "hermione-sauce": "^0.1.0",
82
- "husky": "^4.3.0",
83
- "lint-staged": "^10.5.1",
84
- "magi-cli": "^0.28.0",
85
- "prettier": "^2.1.2",
86
- "rimraf": "^3.0.2",
87
- "rollup": "^2.34.1",
88
- "rollup-plugin-terser": "^7.0.2",
89
- "sinon": "^9.2.0",
90
- "stylelint": "^13.7.1",
91
- "stylelint-config-vaadin": "^0.2.6",
92
- "typescript": "^4.0.5"
49
+ "@webcomponents/webcomponentsjs": "^2.0.0",
50
+ "wct-browser-legacy": "^1.0.1",
51
+ "@vaadin/vaadin-demo-helpers": "^3.1.0",
52
+ "@polymer/iron-form": "^3.0.0"
53
+ },
54
+ "scripts": {
55
+ "generate-typings": "gen-typescript-declarations --outDir . --verify",
56
+ "test": "wct --npm"
93
57
  }
94
58
  }
package/src/vaadin-time-picker-text-field.js CHANGED
@@ -1,41 +1,51 @@
1
1
  /**
2
- * @license
3
- * Copyright (c) 2020 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
2
+ @license
3
+ Copyright (c) 2018 Vaadin Ltd.
4
+ This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
6
  import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
7
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
8
7
 
9
- registerStyles(
10
- 'vaadin-time-picker-text-field',
11
- css`
12
- :host([dir='rtl']) [part='input-field'] {
13
- direction: ltr;
14
- }
8
+ const $_documentContainer = document.createElement('template');
15
9
 
16
- :host([dir='rtl']) [part='value']::placeholder {
17
- direction: rtl;
18
- text-align: left;
19
- }
10
+ $_documentContainer.innerHTML = `<dom-module id="vaadin-time-picker-text-field-styles" theme-for="vaadin-time-picker-text-field">
11
+ <template>
12
+ <style>
13
+ :host([dir="rtl"]) [part="input-field"] {
14
+ direction: ltr;
15
+ }
20
16
 
21
- :host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
22
- direction: rtl;
23
- text-align: left;
24
- }
25
- `,
26
- { moduleId: 'vaadin-time-picker-text-field-styles' }
27
- );
17
+ :host([dir="rtl"]) [part="value"]::placeholder {
18
+ direction: rtl;
19
+ text-align: left;
20
+ }
28
21
 
22
+ :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
23
+ direction: rtl;
24
+ text-align: left;
25
+ }
26
+
27
+ :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
28
+ :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
29
+ direction: rtl;
30
+ text-align: left;
31
+ }
32
+ </style>
33
+ </template>
34
+ </dom-module>`;
35
+
36
+ document.head.appendChild($_documentContainer.content);
29
37
  /**
30
- * The text-field element.
31
- *
32
- * ### Styling
33
- *
34
- * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
35
- * for `<vaadin-time-picker-text-field>` parts and available slots (prefix, suffix etc.)
36
- *
37
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
38
- */
38
+ * The text-field element.
39
+ *
40
+ * ### Styling
41
+ *
42
+ * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
43
+ * for `<vaadin-time-picker-text-field>` parts and available slots (prefix, suffix etc.)
44
+ *
45
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
46
+ *
47
+ * @extends PolymerElement
48
+ */
39
49
  class TimePickerTextFieldElement extends TextFieldElement {
40
50
  static get is() {
41
51
  return 'vaadin-time-picker-text-field';
package/src/vaadin-time-picker.d.ts CHANGED
@@ -1,10 +1,28 @@
1
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1
+ /**
2
+ * DO NOT EDIT
3
+ *
4
+ * This file was automatically generated by
5
+ * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
6
+ *
7
+ * To modify these typings, edit the source file(s):
8
+ * src/vaadin-time-picker.js
9
+ */
10
+
11
+
12
+ // tslint:disable:variable-name Describing an API that's defined elsewhere.
13
+ // tslint:disable:no-any describes the API as best we are able today
2
14
 
3
- import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
15
+ import {PolymerElement} from '@polymer/polymer/polymer-element.js';
4
16
 
5
- import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
17
+ import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
6
18
 
7
- import { TimePickerEventMap, TimePickerI18n, TimePickerTime } from './interfaces';
19
+ import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
20
+
21
+ import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
22
+
23
+ import {html} from '@polymer/polymer/lib/utils/html-tag.js';
24
+
25
+ import {ControlStateMixin} from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
8
26
 
9
27
  /**
10
28
  * `<vaadin-time-picker>` is a Web Component providing a time-selection field.
@@ -50,12 +68,13 @@ import { TimePickerEventMap, TimePickerI18n, TimePickerTime } from './interfaces
50
68
  *
51
69
  * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
52
70
  * propagated to the internal themable components listed above.
53
- *
54
- * @fires {Event} change - Fired when the user commits a value change.
55
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
56
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
57
71
  */
58
- declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(HTMLElement))) {
72
+ declare class TimePickerElement extends
73
+ ElementMixin(
74
+ ControlStateMixin(
75
+ ThemableMixin(
76
+ PolymerElement))) {
77
+
59
78
  /**
60
79
  * Focusable element used by vaadin-control-state-mixin
61
80
  */
@@ -69,7 +88,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
69
88
  /**
70
89
  * The name of this element.
71
90
  */
72
- name: string | null | undefined;
91
+ name: string|null|undefined;
73
92
 
74
93
  /**
75
94
  * The time value for this element.
@@ -84,7 +103,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
84
103
  /**
85
104
  * The label for this element.
86
105
  */
87
- label: string | null | undefined;
106
+ label: string|null|undefined;
88
107
 
89
108
  /**
90
109
  * Set to true to mark the input as required.
@@ -95,24 +114,24 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
95
114
  * Set to true to prevent the user from entering invalid input.
96
115
  * @attr {boolean} prevent-invalid-input
97
116
  */
98
- preventInvalidInput: boolean | null | undefined;
117
+ preventInvalidInput: boolean|null|undefined;
99
118
 
100
119
  /**
101
120
  * A pattern to validate the `input` with.
102
121
  */
103
- pattern: string | null | undefined;
122
+ pattern: string|null|undefined;
104
123
 
105
124
  /**
106
125
  * The error message to display when the input is invalid.
107
126
  * @attr {string} error-message
108
127
  */
109
- errorMessage: string | null | undefined;
128
+ errorMessage: string|null|undefined;
110
129
 
111
130
  /**
112
131
  * String used for the helper text.
113
132
  * @attr {string} helper-text
114
133
  */
115
- helperText: string | null | undefined;
134
+ helperText: string|null|undefined;
116
135
 
117
136
  /**
118
137
  * A placeholder string in addition to the label.
@@ -149,6 +168,11 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
149
168
  */
150
169
  max: string;
151
170
 
171
+ /**
172
+ * When true, the input element has a non-empty value entered by the user.
173
+ */
174
+ _hasInputValue: boolean|null|undefined;
175
+
152
176
  /**
153
177
  * Specifies the number of valid intervals in a day used for
154
178
  * configuring the items displayed in the selection box.
@@ -165,7 +189,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
165
189
  * fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
166
190
  * not recommended to use it for better UX experience.
167
191
  */
168
- step: number | null | undefined;
192
+ step: number|null|undefined;
169
193
 
170
194
  /**
171
195
  * Set to true to display the clear icon which clears the input.
@@ -177,7 +201,7 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
177
201
  * Set true to prevent the overlay from opening automatically.
178
202
  * @attr {boolean} auto-open-disabled
179
203
  */
180
- autoOpenDisabled: boolean | null | undefined;
204
+ autoOpenDisabled: boolean|null|undefined;
181
205
 
182
206
  /**
183
207
  * The object used to localize this component.
@@ -210,13 +234,21 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
210
234
  * }
211
235
  */
212
236
  i18n: TimePickerI18n;
237
+ ready(): void;
238
+ _getInputElement(): any;
239
+ _setInvalid(invalid: boolean): void;
213
240
 
214
- _getInputElement(): HTMLElement;
241
+ /**
242
+ * Override this method to define whether the given `invalid` state should be set.
243
+ */
244
+ _shouldSetInvalid(_invalid: boolean): boolean;
215
245
 
216
246
  /**
217
- * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
247
+ * Validates the field and sets the `invalid` property based on the result.
218
248
  *
219
- * @returns True if the value is valid and sets the `invalid` flag appropriately
249
+ * The method fires a `validated` event with the result of the validation.
250
+ *
251
+ * @returns True if the value is valid.
220
252
  */
221
253
  validate(): boolean;
222
254
 
@@ -236,24 +268,17 @@ declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableM
236
268
  * @returns True if the value is valid
237
269
  */
238
270
  checkValidity(): boolean;
239
-
240
- addEventListener<K extends keyof TimePickerEventMap>(
241
- type: K,
242
- listener: (this: TimePickerElement, ev: TimePickerEventMap[K]) => void,
243
- options?: boolean | AddEventListenerOptions
244
- ): void;
245
-
246
- removeEventListener<K extends keyof TimePickerEventMap>(
247
- type: K,
248
- listener: (this: TimePickerElement, ev: TimePickerEventMap[K]) => void,
249
- options?: boolean | EventListenerOptions
250
- ): void;
251
271
  }
252
272
 
253
273
  declare global {
274
+
254
275
  interface HTMLElementTagNameMap {
255
- 'vaadin-time-picker': TimePickerElement;
276
+ "vaadin-time-picker": TimePickerElement;
256
277
  }
257
278
  }
258
279
 
259
- export { TimePickerElement };
280
+ export {TimePickerElement};
281
+
282
+ import {TimePickerI18n} from '../@types/interfaces';
283
+
284
+ import {TimePickerTime} from '../@types/interfaces';
package/src/vaadin-time-picker.js CHANGED
@@ -1,14 +1,17 @@
1
1
  /**
2
- * @license
3
- * Copyright (c) 2020 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
2
+ @license
3
+ Copyright (c) 2018 Vaadin Ltd.
4
+ This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
+ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
7
+
7
8
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
9
  import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
9
- import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
10
10
  import '@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js';
11
+ import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
11
12
  import './vaadin-time-picker-text-field.js';
13
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
14
+ import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
12
15
 
13
16
  /**
14
17
  * `<vaadin-time-picker>` is a Web Component providing a time-selection field.
@@ -55,89 +58,53 @@ import './vaadin-time-picker-text-field.js';
55
58
  * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
56
59
  * propagated to the internal themable components listed above.
57
60
  *
58
- * @fires {Event} change - Fired when the user commits a value change.
59
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
60
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
61
- *
62
- * @extends HTMLElement
61
+ * @extends PolymerElement
63
62
  * @mixes ElementMixin
64
63
  * @mixes ControlStateMixin
65
64
  * @mixes ThemableMixin
65
+ * @demo demo/index.html
66
66
  */
67
- class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(PolymerElement))) {
67
+ class TimePickerElement extends
68
+ ElementMixin(
69
+ ControlStateMixin(
70
+ ThemableMixin(PolymerElement))) {
68
71
  static get template() {
69
72
  return html`
70
- <style>
71
- :host {
72
- display: inline-block;
73
- }
73
+ <style>
74
+ :host {
75
+ display: inline-block;
76
+ }
74
77
 
75
- :host([hidden]) {
76
- display: none !important;
77
- }
78
+ :host([hidden]) {
79
+ display: none !important;
80
+ }
78
81
 
79
- [part~='toggle-button'] {
80
- cursor: pointer;
81
- }
82
+ [part~="toggle-button"] {
83
+ cursor: pointer;
84
+ }
82
85
 
83
- .input {
84
- width: 100%;
85
- min-width: 0;
86
- }
87
- </style>
88
- <vaadin-combo-box-light
89
- allow-custom-value=""
90
- item-label-path="value"
91
- filtered-items="[[__dropdownItems]]"
92
- disabled="[[disabled]]"
93
- readonly="[[readonly]]"
94
- auto-open-disabled="[[autoOpenDisabled]]"
95
- dir="ltr"
96
- theme$="[[theme]]"
97
- >
98
- <template> [[item.label]] </template>
99
- <vaadin-time-picker-text-field
100
- class="input"
101
- name="[[name]]"
102
- invalid="[[invalid]]"
103
- autocomplete="off"
104
- label="[[label]]"
105
- required="[[required]]"
106
- disabled="[[disabled]]"
107
- prevent-invalid-input="[[preventInvalidInput]]"
108
- pattern="[[pattern]]"
109
- error-message="[[errorMessage]]"
110
- autofocus="[[autofocus]]"
111
- placeholder="[[placeholder]]"
112
- readonly="[[readonly]]"
113
- role="application"
114
- aria-live="assertive"
115
- min$="[[min]]"
116
- max$="[[max]]"
117
- aria-label$="[[label]]"
118
- clear-button-visible="[[clearButtonVisible]]"
119
- i18n="[[i18n]]"
120
- helper-text="[[helperText]]"
121
- theme$="[[theme]]"
122
- >
123
- <slot name="helper" slot="helper">[[helperText]]</slot>
124
- <span
125
- slot="suffix"
126
- part="toggle-button"
127
- class="toggle-button"
128
- role="button"
129
- aria-label$="[[i18n.selector]]"
130
- ></span>
131
- </vaadin-time-picker-text-field>
132
- </vaadin-combo-box-light>
133
- `;
86
+ .input {
87
+ width: 100%;
88
+ min-width: 0;
89
+ }
90
+ </style>
91
+ <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">
92
+ <template>
93
+ [[item.label]]
94
+ </template>
95
+ <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]]">
96
+ <slot name="helper" slot="helper">[[helperText]]</slot>
97
+ <span slot="suffix" part="toggle-button" class="toggle-button" role="button" aria-label\$="[[i18n.selector]]"></span>
98
+ </vaadin-time-picker-text-field>
99
+ </vaadin-combo-box-light>
100
+ `;
134
101
  }
135
102
 
136
103
  static get is() {
137
104
  return 'vaadin-time-picker';
138
105
  }
139
106
  static get version() {
140
- return '3.0.0';
107
+ return '3.1.0';
141
108
  }
142
109
 
143
110
  static get properties() {
@@ -264,7 +231,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
264
231
  */
265
232
  min: {
266
233
  type: String,
267
- value: '00:00:00.000'
234
+ value: '00:00:00.000',
268
235
  },
269
236
 
270
237
  /**
@@ -278,7 +245,17 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
278
245
  */
279
246
  max: {
280
247
  type: String,
281
- value: '23:59:59.999'
248
+ value: '23:59:59.999',
249
+ },
250
+
251
+ /**
252
+ * When true, the input element has a non-empty value entered by the user.
253
+ * @protected
254
+ */
255
+ _hasInputValue: {
256
+ type: Boolean,
257
+ value: false,
258
+ observer: '_hasInputValueChanged',
282
259
  },
283
260
 
284
261
  /**
@@ -366,19 +343,17 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
366
343
  // Always display hour and minute
367
344
  let timeString = `${pad(time.hours)}:${pad(time.minutes)}`;
368
345
  // Adding second and millisecond depends on resolution
369
- time.seconds !== undefined && (timeString += `:${pad(time.seconds)}`);
370
- time.milliseconds !== undefined && (timeString += `.${pad(time.milliseconds, '000')}`);
346
+ (time.seconds !== undefined) && (timeString += `:${pad(time.seconds)}`);
347
+ (time.milliseconds !== undefined) && (timeString += `.${pad(time.milliseconds, '000')}`);
371
348
  return timeString;
372
349
  },
373
- parseTime: (text) => {
350
+ parseTime: text => {
374
351
  // Parsing with RegExp to ensure correct format
375
352
  const MATCH_HOURS = '(\\d|[0-1]\\d|2[0-3])';
376
353
  const MATCH_MINUTES = '(\\d|[0-5]\\d)';
377
354
  const MATCH_SECONDS = MATCH_MINUTES;
378
355
  const MATCH_MILLISECONDS = '(\\d{1,3})';
379
- const re = new RegExp(
380
- `^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`
381
- );
356
+ const re = new RegExp(`^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`);
382
357
  const parts = re.exec(text);
383
358
  if (parts) {
384
359
  // Allows setting the milliseconds with hundreds and tens precision
@@ -387,7 +362,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
387
362
  parts[4] += '0';
388
363
  }
389
364
  }
390
- return { hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4] };
365
+ return {hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4]};
391
366
  }
392
367
  },
393
368
  selector: 'Time selector',
@@ -399,7 +374,9 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
399
374
  }
400
375
 
401
376
  static get observers() {
402
- return ['__updateDropdownItems(i18n.*, min, max, step)'];
377
+ return [
378
+ '__updateDropdownItems(i18n.*, min, max, step)'
379
+ ];
403
380
  }
404
381
 
405
382
  /** @protected */
@@ -411,14 +388,14 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
411
388
 
412
389
  // Not using declarative because we receive an event before text-element shadow is ready,
413
390
  // thus querySelector in textField.focusElement raises an undefined exception on validate
414
- this.__dropdownElement.addEventListener('value-changed', (e) => this.__onInputChange(e));
391
+ this.__dropdownElement.addEventListener('value-changed', e => this.__onInputChange(e));
415
392
  this.__inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));
416
393
 
417
394
  // Validation listeners
418
- this.__dropdownElement.addEventListener('change', () => this.validate());
419
- this.__inputElement.addEventListener('blur', () => this.validate());
395
+ this.__dropdownElement.addEventListener('change', e => this.validate());
396
+ this.__inputElement.addEventListener('blur', e => this.validate());
420
397
 
421
- this.__dropdownElement.addEventListener('change', (e) => {
398
+ this.__dropdownElement.addEventListener('change', e => {
422
399
  // `vaadin-combo-box-light` forwards 'change' event from text-field.
423
400
  // So we need to filter out in order to avoid duplicates.
424
401
  if (e.composedPath()[0] !== this.__inputElement) {
@@ -427,23 +404,35 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
427
404
  });
428
405
  }
429
406
 
407
+ /**
408
+ * Observer to notify about the change of private property.
409
+ *
410
+ * @private
411
+ */
412
+ _hasInputValueChanged(hasValue, oldHasValue) {
413
+ if (hasValue || oldHasValue) {
414
+ this.dispatchEvent(new CustomEvent('has-input-value-changed'));
415
+ }
416
+ }
417
+
430
418
  /** @private */
431
419
  __validDayDivisor(step) {
432
420
  // valid if undefined, or exact divides a day, or has millisecond resolution
433
- return !step || (24 * 3600) % step === 0 || (step < 1 && ((step % 1) * 1000) % 1 === 0);
421
+ return !step || 24 * 3600 % step === 0 || (step < 1 && step % 1 * 1000 % 1 === 0);
434
422
  }
435
423
 
436
424
  /** @private */
437
425
  __onKeyDown(e) {
426
+
438
427
  if (this.readonly || this.disabled || this.__dropdownItems.length) {
439
428
  return;
440
429
  }
441
430
 
442
- const stepResolution = (this.__validDayDivisor(this.step) && this.step) || 60;
431
+ const stepResolution = this.__validDayDivisor(this.step) && this.step || 60;
443
432
 
444
- if (e.keyCode === 40) {
433
+ if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'down')) {
445
434
  this.__onArrowPressWithStep(-stepResolution);
446
- } else if (e.keyCode === 38) {
435
+ } else if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'up')) {
447
436
  this.__onArrowPressWithStep(stepResolution);
448
437
  }
449
438
  }
@@ -458,7 +447,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
458
447
 
459
448
  /** @private */
460
449
  __dispatchChange() {
461
- this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
450
+ this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
462
451
  }
463
452
 
464
453
  /**
@@ -466,10 +455,10 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
466
455
  * @private
467
456
  */
468
457
  __getMsec(obj) {
469
- let result = ((obj && obj.hours) || 0) * 60 * 60 * 1000;
470
- result += ((obj && obj.minutes) || 0) * 60 * 1000;
471
- result += ((obj && obj.seconds) || 0) * 1000;
472
- result += (obj && parseInt(obj.milliseconds)) || 0;
458
+ let result = (obj && obj.hours || 0) * 60 * 60 * 1000;
459
+ result += (obj && obj.minutes || 0) * 60 * 1000;
460
+ result += (obj && obj.seconds || 0) * 1000;
461
+ result += (obj && parseInt(obj.milliseconds) || 0);
473
462
 
474
463
  return result;
475
464
  }
@@ -479,10 +468,10 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
479
468
  * @private
480
469
  */
481
470
  __getSec(obj) {
482
- let result = ((obj && obj.hours) || 0) * 60 * 60;
483
- result += ((obj && obj.minutes) || 0) * 60;
484
- result += (obj && obj.seconds) || 0;
485
- result += (obj && obj.milliseconds / 1000) || 0;
471
+ let result = (obj && obj.hours || 0) * 60 * 60;
472
+ result += (obj && obj.minutes || 0) * 60;
473
+ result += (obj && obj.seconds || 0);
474
+ result += (obj && obj.milliseconds / 1000 || 0);
486
475
 
487
476
  return result;
488
477
  }
@@ -516,7 +505,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
516
505
  var ss = Math.floor(msec / 1000);
517
506
  msec -= ss * 1000;
518
507
 
519
- return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
508
+ return {hours: (hh < 24) ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec};
520
509
  }
521
510
 
522
511
  /** @private */
@@ -558,7 +547,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
558
547
  const timeObj = this.__validateTime(this.__addStep(time * 1000, step));
559
548
  time += step;
560
549
  const formatted = this.i18n.formatTime(timeObj);
561
- generatedList.push({ label: formatted, value: formatted });
550
+ generatedList.push({label: formatted, value: formatted});
562
551
  }
563
552
 
564
553
  return generatedList;
@@ -582,7 +571,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
582
571
 
583
572
  /** @private */
584
573
  __valueChanged(value, oldValue) {
585
- const parsedObj = (this.__memoValue = this.__parseISO(value));
574
+ const parsedObj = this.__memoValue = this.__parseISO(value);
586
575
  const newValue = this.__formatISO(parsedObj) || '';
587
576
 
588
577
  if (this.value !== '' && this.value !== null && !parsedObj) {
@@ -595,7 +584,7 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
595
584
  }
596
585
 
597
586
  /** @private */
598
- __onInputChange() {
587
+ __onInputChange(e) {
599
588
  const parsedObj = this.i18n.parseTime(this.__dropdownElement.value);
600
589
  const newValue = this.i18n.formatTime(parsedObj) || '';
601
590
 
@@ -648,7 +637,6 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
648
637
  // Accept milliseconds
649
638
  return 4;
650
639
  }
651
- return undefined;
652
640
  }
653
641
 
654
642
  /** @private */
@@ -675,7 +663,8 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
675
663
 
676
664
  /** @private */
677
665
  get __dropdownElement() {
678
- return this.__memoDropdown || (this.__memoDropdown = this.shadowRoot.querySelector('vaadin-combo-box-light'));
666
+ return this.__memoDropdown ||
667
+ (this.__memoDropdown = this.shadowRoot.querySelector('vaadin-combo-box-light'));
679
668
  }
680
669
 
681
670
  /**
@@ -688,12 +677,47 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
688
677
  }
689
678
 
690
679
  /**
691
- * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
680
+ * Synchronizes the `_hasInputValue` property with the internal combo-box's one.
681
+ *
682
+ * @private
683
+ */
684
+ __onComboBoxHasInputValueChanged() {
685
+ this._hasInputValue = this.__dropdownElement._hasInputValue;
686
+ }
687
+
688
+ /**
689
+ * @param {boolean} invalid
690
+ * @protected
691
+ */
692
+ _setInvalid(invalid) {
693
+ if (this._shouldSetInvalid(invalid)) {
694
+ this.invalid = invalid;
695
+ }
696
+ }
697
+
698
+ /**
699
+ * Override this method to define whether the given `invalid` state should be set.
700
+ *
701
+ * @param {boolean} _invalid
702
+ * @return {boolean}
703
+ * @protected
704
+ */
705
+ _shouldSetInvalid(_invalid) {
706
+ return true;
707
+ }
708
+
709
+ /**
710
+ * Validates the field and sets the `invalid` property based on the result.
711
+ *
712
+ * The method fires a `validated` event with the result of the validation.
692
713
  *
693
- * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
714
+ * @return {boolean} True if the value is valid.
694
715
  */
695
716
  validate() {
696
- return !(this.invalid = !this.checkValidity());
717
+ const isValid = this.checkValidity();
718
+ this._setInvalid(!isValid);
719
+ this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
720
+ return isValid;
697
721
  }
698
722
 
699
723
  /**
@@ -707,10 +731,8 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
707
731
  const parsedMin = this.i18n.parseTime(this.min);
708
732
  const parsedMax = this.i18n.parseTime(this.max);
709
733
 
710
- return (
711
- (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
712
- (!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax))
713
- );
734
+ return (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
735
+ (!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax));
714
736
  }
715
737
 
716
738
  /**
@@ -721,17 +743,17 @@ class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(Pol
721
743
  * @return {boolean} True if the value is valid
722
744
  */
723
745
  checkValidity() {
724
- return !!(
725
- this.__inputElement.focusElement.checkValidity() &&
746
+ return !!(this.__inputElement.focusElement.checkValidity() &&
726
747
  (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
727
- (!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value))
728
- );
748
+ (!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value)));
729
749
  }
730
750
 
731
751
  /**
732
- * Fired when the user commits a value change.
752
+ * Fired whenever the field is validated.
733
753
  *
734
- * @event change
754
+ * @event validated
755
+ * @param {Object} detail
756
+ * @param {boolean} detail.valid the result of the validation.
735
757
  */
736
758
  }
737
759
 
package/theme/lumo/vaadin-time-picker-styles.js CHANGED
@@ -1,14 +1,16 @@
1
1
  import '@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js';
2
2
  import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
3
3
  import '@vaadin/vaadin-lumo-styles/font-icons.js';
4
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
4
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
5
5
 
6
- registerStyles(
7
- 'vaadin-time-picker',
8
- css`
9
- [part~='toggle-button']::before {
10
- content: var(--lumo-icons-clock);
11
- }
12
- `,
13
- { include: ['lumo-field-button'], moduleId: 'lumo-time-picker' }
14
- );
6
+ const $_documentContainer = html`<dom-module id="lumo-time-picker" theme-for="vaadin-time-picker">
7
+ <template>
8
+ <style include="lumo-field-button">
9
+ [part~="toggle-button"]::before {
10
+ content: var(--lumo-icons-clock);
11
+ }
12
+ </style>
13
+ </template>
14
+ </dom-module>`;
15
+
16
+ document.head.appendChild($_documentContainer.content);
package/theme/lumo/vaadin-time-picker-text-field-styles.js CHANGED
@@ -1,18 +1,21 @@
1
1
  import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
2
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
3
3
 
4
- registerStyles(
5
- 'vaadin-time-picker-text-field',
6
- css`
7
- :host([dir='rtl']) [part='value']:placeholder-shown,
8
- :host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
9
- --_lumo-text-field-overflow-mask-image: none;
10
- }
4
+ const $_documentContainer = html`<dom-module id="lumo-time-picker-text-field" theme-for="vaadin-time-picker-text-field">
5
+ <template>
6
+ <style>
7
+ :not(*):placeholder-shown, /* to prevent broken styles on IE */
8
+ :host([dir="rtl"]) [part="value"]:placeholder-shown,
9
+ :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
10
+ --_lumo-text-field-overflow-mask-image: none;
11
+ }
11
12
 
12
- :host([dir='rtl']) [part='value'],
13
- :host([dir='rtl']) [part='input-field'] ::slotted(input) {
14
- --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
15
- }
16
- `,
17
- { moduleId: 'lumo-time-picker-text-field' }
18
- );
13
+ :host([dir="rtl"]) [part="value"],
14
+ :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
15
+ --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
16
+ }
17
+ </style>
18
+ </template>
19
+ </dom-module>`;
20
+
21
+ document.head.appendChild($_documentContainer.content);
package/theme/material/vaadin-time-picker-styles.js CHANGED
@@ -2,14 +2,16 @@ import '@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light.js';
2
2
  import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
3
3
  import '@vaadin/vaadin-material-styles/mixins/field-button.js';
4
4
  import '@vaadin/vaadin-material-styles/font-icons.js';
5
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
5
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
6
6
 
7
- registerStyles(
8
- 'vaadin-time-picker',
9
- css`
10
- [part~='toggle-button']::before {
11
- content: var(--material-icons-clock);
12
- }
13
- `,
14
- { include: ['material-field-button'], moduleId: 'material-time-picker' }
15
- );
7
+ const $_documentContainer = html`<dom-module id="material-time-picker" theme-for="vaadin-time-picker">
8
+ <template>
9
+ <style include="material-field-button">
10
+ [part~="toggle-button"]::before {
11
+ content: var(--material-icons-clock);
12
+ }
13
+ </style>
14
+ </template>
15
+ </dom-module>`;
16
+
17
+ document.head.appendChild($_documentContainer.content);
package/vaadin-time-picker.d.ts CHANGED
@@ -1,2 +1,15 @@
1
+ /**
2
+ * DO NOT EDIT
3
+ *
4
+ * This file was automatically generated by
5
+ * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
6
+ *
7
+ * To modify these typings, edit the source file(s):
8
+ * vaadin-time-picker.js
9
+ */
10
+
11
+
12
+ // tslint:disable:variable-name Describing an API that's defined elsewhere.
13
+
1
14
  export * from './src/vaadin-time-picker.js';
2
- export * from './src/interfaces';
15
+ export * from './@types/interfaces';
package/src/interfaces.d.ts DELETED
@@ -1,31 +0,0 @@
1
- export interface TimePickerTime {
2
- hours: string | number;
3
- minutes: string | number;
4
- seconds?: string | number;
5
- milliseconds?: string | number;
6
- }
7
-
8
- export interface TimePickerI18n {
9
- parseTime: (time: string) => TimePickerTime | undefined;
10
- formatTime: (time: TimePickerTime) => string;
11
- clear: string;
12
- selector: string;
13
- }
14
-
15
- /**
16
- * Fired when the `invalid` property changes.
17
- */
18
- export type TimePickerInvalidChanged = CustomEvent<{ value: boolean }>;
19
-
20
- /**
21
- * Fired when the `value` property changes.
22
- */
23
- export type TimePickerValueChanged = CustomEvent<{ value: string }>;
24
-
25
- export interface TimePickerElementEventMap {
26
- 'invalid-changed': TimePickerInvalidChanged;
27
-
28
- 'value-changed': TimePickerValueChanged;
29
- }
30
-
31
- export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerElementEventMap {}