@vaadin/vaadin-date-time-picker 2.0.0 → 2.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 (13) hide show
  1. package/@types/interfaces.d.ts +4 -0
  2. package/README.md +51 -18
  3. package/package.json +26 -62
  4. package/src/vaadin-date-time-picker-custom-field.js +16 -28
  5. package/src/vaadin-date-time-picker-date-picker.js +16 -16
  6. package/src/vaadin-date-time-picker-date-text-field.js +15 -15
  7. package/src/vaadin-date-time-picker-time-picker.js +16 -16
  8. package/src/vaadin-date-time-picker-time-text-field.js +15 -15
  9. package/src/vaadin-date-time-picker.d.ts +50 -34
  10. package/src/vaadin-date-time-picker.js +138 -110
  11. package/theme/lumo/vaadin-date-time-picker-styles.js +46 -48
  12. package/vaadin-date-time-picker.d.ts +14 -1
  13. package/src/interfaces.d.ts +0 -22
package/@types/interfaces.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { DatePickerI18n } from '@vaadin/vaadin-date-picker/@types/interfaces';
2
+ import { TimePickerI18n } from '@vaadin/vaadin-time-picker/@types/interfaces';
3
+
4
+ export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {}
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # <vaadin-date-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-date-time-picker) monorepository.
4
+ > This repository contains the source code and releases of `<vaadin-date-time-picker>` for the Vaadin versions 10 to 19.
5
+
3
6
  [&lt;vaadin-date-time-picker&gt;](https://vaadin.com/components/vaadin-date-time-picker) is a Web Component providing a date and time selection field which includes a scrollable month calendar view, part of the [Vaadin components](https://vaadin.com/components).
4
7
 
5
8
  [Live Demo ↗](https://vaadin.com/components/vaadin-date-time-picker/html-examples)
@@ -7,14 +10,24 @@
7
10
  [API documentation ↗](https://vaadin.com/components/vaadin-date-time-picker/html-api)
8
11
 
9
12
  [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-date-time-picker)](https://www.npmjs.com/package/@vaadin/vaadin-date-time-picker)
10
- [![Build Status](https://travis-ci.org/vaadin/vaadin-date-time-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-date-time-picker)
11
- [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-date-time-picker)
12
13
  [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-time-picker)
13
- [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-date-time-picker-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-date-time-picker)
14
14
  [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
15
15
 
16
+ <!--
17
+ ```
18
+ <custom-element-demo>
19
+ <template>
20
+ <script src="../webcomponentsjs/webcomponents-lite.js"></script>
21
+ <link rel="import" href="vaadin-date-time-picker.html">
22
+ <next-code-block></next-code-block>
23
+ </template>
24
+ </custom-element-demo>
25
+ ```
26
+ -->
16
27
  ```html
17
- <vaadin-date-time-picker></vaadin-date-time-picker>
28
+ <vaadin-date-time-picker>
29
+ ...
30
+ </vaadin-date-time-picker>
18
31
  ```
19
32
 
20
33
  [<img src="https://raw.githubusercontent.com/vaadin/vaadin-date-time-picker/master/screenshot.png" width="200" alt="Screenshot of vaadin-date-time-picker">](https://vaadin.com/components/vaadin-date-time-picker)
@@ -22,6 +35,28 @@
22
35
 
23
36
  ## Installation
24
37
 
38
+ The Vaadin components are distributed as Bower and npm packages.
39
+ Please note that the version range is the same, as the API has not changed.
40
+ You should not mix Bower and npm versions in the same application, though.
41
+
42
+ The converted ES Modules are only published on npm, not pushed to GitHub repositories.
43
+
44
+ ### Bower (HTML Imports compatible version)
45
+
46
+ Install `vaadin-date-time-picker`:
47
+
48
+ ```sh
49
+ bower i vaadin/vaadin-date-time-picker --save
50
+ ```
51
+
52
+ Once installed, import it in your application:
53
+
54
+ ```html
55
+ <link rel="import" href="bower_components/vaadin-date-time-picker/vaadin-date-time-picker.html">
56
+ ```
57
+
58
+ ### npm (ES Modules compatible version)
59
+
25
60
  Install `vaadin-date-time-picker`:
26
61
 
27
62
  ```sh
@@ -44,45 +79,43 @@ To use the Material theme, import the correspondent file from the `theme/materia
44
79
 
45
80
  - The component with the Lumo theme:
46
81
 
47
- `theme/lumo/vaadin-date-time-picker.js`
82
+ `theme/lumo/vaadin-date-time-picker.html`
48
83
 
49
84
  - The component with the Material theme:
50
85
 
51
- `theme/material/vaadin-date-time-picker.js`
86
+ `theme/material/vaadin-date-time-picker.html`
52
87
 
53
- - Alias for `theme/lumo/vaadin-date-time-picker.js`:
88
+ - Alias for `theme/lumo/vaadin-date-time-picker.html`:
54
89
 
55
- `vaadin-date-time-picker.js`
90
+ `vaadin-date-time-picker.html`
56
91
 
57
92
 
58
- ## Running API docs and tests in a browser
93
+ ## Running demos and tests in a browser
59
94
 
60
95
  1. Fork the `vaadin-date-time-picker` repository and clone it locally.
61
96
 
62
- 1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
97
+ 1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
63
98
 
64
- 1. Make sure you have [npm](https://www.npmjs.com/) installed.
99
+ 1. When in the `vaadin-date-time-picker` directory, run `npm install` and then `bower install` to install dependencies.
65
100
 
66
- 1. When in the `vaadin-date-time-picker` directory, run `npm install` to install dependencies.
101
+ 1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
67
102
 
68
103
  1. Run `npm start`, browser will automatically open the component API documentation.
69
104
 
70
- 1. You can also open visual tests, for example:
105
+ 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
71
106
 
72
- - http://127.0.0.1:3000/test/visual/default.html
107
+ - http://127.0.0.1:3000/components/vaadin-date-time-picker/demo
108
+ - http://127.0.0.1:3000/components/vaadin-date-time-picker/test
73
109
 
74
110
 
75
111
  ## Running tests from the command line
76
112
 
77
113
  1. When in the `vaadin-date-time-picker` directory, run `npm test`
78
114
 
79
- ## Debugging tests in the browser
80
-
81
- 1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
82
115
 
83
116
  ## Following the coding style
84
117
 
85
- 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.
118
+ 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.
86
119
 
87
120
 
88
121
  ## Big Thanks
package/package.json CHANGED
@@ -1,10 +1,5 @@
1
1
  {
2
- "name": "@vaadin/vaadin-date-time-picker",
3
- "version": "2.0.0",
4
2
  "description": "vaadin-date-time-picker",
5
- "main": "vaadin-date-time-picker.js",
6
- "module": "vaadin-date-time-picker.js",
7
- "repository": "vaadin/vaadin-date-time-picker",
8
3
  "keywords": [
9
4
  "Vaadin",
10
5
  "vaadin-date-time-picker",
@@ -12,82 +7,51 @@
12
7
  "web-component",
13
8
  "polymer"
14
9
  ],
10
+ "repository": "vaadin/vaadin-date-time-picker",
11
+ "homepage": "https://vaadin.com/components",
12
+ "name": "@vaadin/vaadin-date-time-picker",
13
+ "version": "2.1.0",
14
+ "main": "vaadin-date-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-date-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
35
  "@vaadin/vaadin-themable-mixin": "^1.6.1",
59
36
  "@vaadin/vaadin-element-mixin": "^2.4.1",
60
- "@vaadin/vaadin-lumo-styles": "^1.6.1",
37
+ "@vaadin/vaadin-lumo-styles": "^1.6.0",
61
38
  "@vaadin/vaadin-material-styles": "^1.3.2",
62
- "@vaadin/vaadin-date-picker": "^5.0.0",
63
- "@vaadin/vaadin-time-picker": "^3.0.0",
64
- "@vaadin/vaadin-custom-field": "^2.0.0"
39
+ "@vaadin/vaadin-date-picker": "^4.6.0",
40
+ "@vaadin/vaadin-time-picker": "^3.1.0",
41
+ "@vaadin/vaadin-custom-field": "^1.4.0"
65
42
  },
66
43
  "devDependencies": {
67
- "@esm-bundle/chai": "^4.1.5",
68
- "@open-wc/rollup-plugin-html": "^1.2.5",
69
- "@open-wc/testing-helpers": "^1.8.12",
44
+ "@web-padawan/gen-typescript-declarations": "^1.6.2",
45
+ "web-component-tester": "6.9.2",
70
46
  "@polymer/iron-component-page": "^4.0.0",
71
- "@web/dev-server": "^0.0.29",
72
- "@web/test-runner": "^0.10.0",
73
- "@web/test-runner-saucelabs": "^0.2.0",
74
- "eslint": "^7.15.0",
75
- "eslint-config-prettier": "^6.15.0",
76
- "eslint-plugin-prettier": "^3.1.4",
77
- "hermione": "^3.9.0",
78
- "hermione-esm": "^0.4.0",
79
- "hermione-sauce": "^0.1.0",
80
- "husky": "^4.3.0",
81
- "lint-staged": "^10.5.1",
82
- "magi-cli": "^0.29.0",
83
- "prettier": "^2.2.0",
84
- "rimraf": "^3.0.2",
85
- "rollup": "^2.34.1",
86
- "rollup-plugin-terser": "^7.0.2",
87
- "sinon": "^9.2.1",
88
- "stylelint": "^13.8.0",
89
- "stylelint-config-prettier": "^8.0.2",
90
- "stylelint-config-vaadin": "^0.2.7",
91
- "typescript": "^4.1.3"
47
+ "@webcomponents/webcomponentsjs": "^2.0.0",
48
+ "wct-browser-legacy": "^1.0.1",
49
+ "@vaadin/vaadin-demo-helpers": "^3.1.0",
50
+ "@vaadin/vaadin-text-field": "^2.10.0",
51
+ "sugar": "^2.0.0"
52
+ },
53
+ "scripts": {
54
+ "generate-typings": "gen-typescript-declarations --outDir . --verify",
55
+ "test": "wct --npm"
92
56
  }
93
57
  }
package/src/vaadin-date-time-picker-custom-field.js CHANGED
@@ -1,41 +1,29 @@
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) 2019 Vaadin Ltd.
4
+ This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
6
  import { CustomFieldElement } from '@vaadin/vaadin-custom-field/src/vaadin-custom-field.js';
7
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
8
-
9
- registerStyles(
10
- 'vaadin-date-time-picker-custom-field',
11
- css`
12
- :host,
13
- .container {
14
- width: 100%;
15
- }
16
- `,
17
- { moduleId: 'vaadin-date-time-picker-custom-field' }
18
- );
19
7
 
20
8
  /**
21
- * The custom-field element.
22
- *
23
- * ### Styling
24
- *
25
- * See [`<vaadin-custom-field>` documentation](https://github.com/vaadin/vaadin-custom-field/blob/master/src/vaadin-custom-field.html)
26
- * for `<vaadin-date-time-picker-custom-field>` parts and available slots (prefix, suffix etc.)
27
- *
28
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
29
- *
30
- * @extends HTMLElement
31
- */
9
+ * The custom-field element.
10
+ *
11
+ * ### Styling
12
+ *
13
+ * See [`<vaadin-custom-field>` documentation](https://github.com/vaadin/vaadin-custom-field/blob/master/src/vaadin-custom-field.html)
14
+ * for `<vaadin-date-time-picker-custom-field>` parts and available slots (prefix, suffix etc.)
15
+ *
16
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
17
+ *
18
+ * @extends PolymerElement
19
+ */
32
20
  class DateTimePickerCustomFieldElement extends CustomFieldElement {
33
21
  static get is() {
34
22
  return 'vaadin-date-time-picker-custom-field';
35
23
  }
36
24
 
37
25
  connectedCallback() {
38
- this.__toggleHasValue = function (value) {
26
+ this.__toggleHasValue = function(value) {
39
27
  if (value !== null && value !== '' && value.split('T').indexOf('') === -1) {
40
28
  this.setAttribute('has-value', '');
41
29
  } else {
package/src/vaadin-date-time-picker-date-picker.js CHANGED
@@ -1,25 +1,25 @@
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) 2019 Vaadin Ltd.
4
+ This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
6
  import { DatePickerElement } from '@vaadin/vaadin-date-picker/src/vaadin-date-picker.js';
7
- import './vaadin-date-time-picker-date-text-field.js';
8
7
 
8
+ import './vaadin-date-time-picker-date-text-field.js';
9
9
  let memoizedTemplate;
10
10
 
11
11
  /**
12
- * The date-picker element.
13
- *
14
- * ### Styling
15
- *
16
- * See [`<vaadin-date-picker>` documentation](https://github.com/vaadin/vaadin-date-picker/blob/master/src/vaadin-date-picker.html)
17
- * for `<vaadin-date-time-picker-date-picker>` parts and available slots (prefix, suffix etc.)
18
- *
19
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
20
- *
21
- * @extends HTMLElement
22
- */
12
+ * The date-picker element.
13
+ *
14
+ * ### Styling
15
+ *
16
+ * See [`<vaadin-date-picker>` documentation](https://github.com/vaadin/vaadin-date-picker/blob/master/src/vaadin-date-picker.html)
17
+ * for `<vaadin-date-time-picker-date-picker>` parts and available slots (prefix, suffix etc.)
18
+ *
19
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
20
+ *
21
+ * @extends PolymerElement
22
+ */
23
23
  class DateTimePickerDatePickerElement extends DatePickerElement {
24
24
  static get is() {
25
25
  return 'vaadin-date-time-picker-date-picker';
package/src/vaadin-date-time-picker-date-text-field.js CHANGED
@@ -1,22 +1,22 @@
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) 2019 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
7
 
8
8
  /**
9
- * The text-field element for date input.
10
- *
11
- * ### Styling
12
- *
13
- * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
14
- * for `<vaadin-date-time-picker-date-text-field>` parts and available slots (prefix, suffix etc.)
15
- *
16
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
17
- *
18
- * @extends HTMLElement
19
- */
9
+ * The text-field element for date input.
10
+ *
11
+ * ### Styling
12
+ *
13
+ * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
14
+ * for `<vaadin-date-time-picker-date-text-field>` parts and available slots (prefix, suffix etc.)
15
+ *
16
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
17
+ *
18
+ * @extends PolymerElement
19
+ */
20
20
  class DateTimePickerDateTextFieldElement extends TextFieldElement {
21
21
  static get is() {
22
22
  return 'vaadin-date-time-picker-date-text-field';
package/src/vaadin-date-time-picker-time-picker.js CHANGED
@@ -1,25 +1,25 @@
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) 2019 Vaadin Ltd.
4
+ This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
+ */
6
6
  import { TimePickerElement } from '@vaadin/vaadin-time-picker/src/vaadin-time-picker.js';
7
- import './vaadin-date-time-picker-time-text-field.js';
8
7
 
8
+ import './vaadin-date-time-picker-time-text-field.js';
9
9
  let memoizedTemplate;
10
10
 
11
11
  /**
12
- * The time-picker element.
13
- *
14
- * ### Styling
15
- *
16
- * See [`<vaadin-time-picker>` documentation](https://github.com/vaadin/vaadin-time-picker/blob/master/src/vaadin-time-picker.html)
17
- * for `<vaadin-date-time-picker-time-picker>` parts and available slots (prefix, suffix etc.)
18
- *
19
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
20
- *
21
- * @extends HTMLElement
22
- */
12
+ * The time-picker element.
13
+ *
14
+ * ### Styling
15
+ *
16
+ * See [`<vaadin-time-picker>` documentation](https://github.com/vaadin/vaadin-time-picker/blob/master/src/vaadin-time-picker.html)
17
+ * for `<vaadin-date-time-picker-time-picker>` parts and available slots (prefix, suffix etc.)
18
+ *
19
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
20
+ *
21
+ * @extends PolymerElement
22
+ */
23
23
  class DateTimePickerTimePickerElement extends TimePickerElement {
24
24
  static get is() {
25
25
  return 'vaadin-date-time-picker-time-picker';
package/src/vaadin-date-time-picker-time-text-field.js CHANGED
@@ -1,22 +1,22 @@
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) 2019 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
7
 
8
8
  /**
9
- * The text-field element for time input.
10
- *
11
- * ### Styling
12
- *
13
- * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
14
- * for `<vaadin-date-time-picker-time-text-field>` parts and available slots (prefix, suffix etc.)
15
- *
16
- * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
17
- *
18
- * @extends HTMLElement
19
- */
9
+ * The text-field element for time input.
10
+ *
11
+ * ### Styling
12
+ *
13
+ * See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
14
+ * for `<vaadin-date-time-picker-time-text-field>` parts and available slots (prefix, suffix etc.)
15
+ *
16
+ * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
17
+ *
18
+ * @extends PolymerElement
19
+ */
20
20
  class DateTimePickerTimeTextFieldElement extends TextFieldElement {
21
21
  static get is() {
22
22
  return 'vaadin-date-time-picker-time-text-field';
package/src/vaadin-date-time-picker.d.ts CHANGED
@@ -1,8 +1,23 @@
1
- import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-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-date-time-picker.js
9
+ */
10
+
2
11
 
3
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
+ // tslint:disable:variable-name Describing an API that's defined elsewhere.
4
13
 
5
- import { DateTimePickerEventMap, DateTimePickerI18n } from './interfaces';
14
+ import {PolymerElement} from '@polymer/polymer/polymer-element.js';
15
+
16
+ import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
17
+
18
+ import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
19
+
20
+ import {html} from '@polymer/polymer/lib/utils/html-tag.js';
6
21
 
7
22
  /**
8
23
  * `<vaadin-date-time-picker>` is a Web Component providing a date time selection field.
@@ -50,16 +65,16 @@ import { DateTimePickerEventMap, DateTimePickerI18n } from './interfaces';
50
65
  *
51
66
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
52
67
  * 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
68
  */
58
- declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLElement)) {
69
+ declare class DateTimePicker extends
70
+ ElementMixin(
71
+ ThemableMixin(
72
+ PolymerElement)) {
73
+
59
74
  /**
60
75
  * The name of the control, which is submitted with the form data.
61
76
  */
62
- name: string | null | undefined;
77
+ name: string|null|undefined;
63
78
 
64
79
  /**
65
80
  * Set to true if the value is invalid.
@@ -75,7 +90,7 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
75
90
  * The error message to display when the input is invalid.
76
91
  * @attr {string} error-message
77
92
  */
78
- errorMessage: string | null | undefined;
93
+ errorMessage: string|null|undefined;
79
94
 
80
95
  /**
81
96
  * The value for this element.
@@ -95,7 +110,7 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
95
110
  * - Second precision `"YYYY-MM-DDThh:mm:ss"`
96
111
  * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
97
112
  */
98
- min: string | undefined;
113
+ min: string|undefined;
99
114
 
100
115
  /**
101
116
  * The latest value (date and time) that can be selected. All later values will be disabled.
@@ -105,25 +120,25 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
105
120
  * - Second precision `"YYYY-MM-DDThh:mm:ss"`
106
121
  * - Millisecond precision `"YYYY-MM-DDThh:mm:ss.fff"`
107
122
  */
108
- max: string | undefined;
123
+ max: string|undefined;
109
124
 
110
125
  /**
111
126
  * A placeholder string for the date field.
112
127
  * @attr {string} date-placeholder
113
128
  */
114
- datePlaceholder: string | null | undefined;
129
+ datePlaceholder: string|null|undefined;
115
130
 
116
131
  /**
117
132
  * A placeholder string for the time field.
118
133
  * @attr {string} time-placeholder
119
134
  */
120
- timePlaceholder: string | null | undefined;
135
+ timePlaceholder: string|null|undefined;
121
136
 
122
137
  /**
123
138
  * String used for the helper text.
124
139
  * @attr {string} helper-text
125
140
  */
126
- helperText: string | null | undefined;
141
+ helperText: string|null|undefined;
127
142
 
128
143
  /**
129
144
  * Specifies the number of valid intervals in a day used for
@@ -141,7 +156,7 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
141
156
  * fragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is
142
157
  * not recommended to use it for better UX.
143
158
  */
144
- step: number | null | undefined;
159
+ step: number|null|undefined;
145
160
 
146
161
  /**
147
162
  * Date which should be visible in the date picker overlay when there is no value selected.
@@ -149,7 +164,7 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
149
164
  * The same date formats as for the `value` property are supported but without the time part.
150
165
  * @attr {string} initial-position
151
166
  */
152
- initialPosition: string | null | undefined;
167
+ initialPosition: string|null|undefined;
153
168
 
154
169
  /**
155
170
  * Set true to display ISO-8601 week numbers in the calendar. Notice that
@@ -157,7 +172,7 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
157
172
  * is 1 (Monday).
158
173
  * @attr {boolean} show-week-numbers
159
174
  */
160
- showWeekNumbers: boolean | null | undefined;
175
+ showWeekNumbers: boolean|null|undefined;
161
176
 
162
177
  /**
163
178
  * String used for the label element.
@@ -168,7 +183,7 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
168
183
  * Set to true to prevent the overlays from opening automatically.
169
184
  * @attr {boolean} auto-open-disabled
170
185
  */
171
- autoOpenDisabled: boolean | null | undefined;
186
+ autoOpenDisabled: boolean|null|undefined;
172
187
 
173
188
  /**
174
189
  * Set to true to disable this element.
@@ -196,9 +211,19 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
196
211
  * - [`time-picker` documentation](https://vaadin.com/components/vaadin-time-picker/html-api/elements/Vaadin.TimePickerElement)
197
212
  */
198
213
  i18n: DateTimePickerI18n;
214
+ ready(): void;
215
+ focus(): void;
216
+ _setInvalid(invalid: boolean): void;
217
+
218
+ /**
219
+ * Override this method to define whether the given `invalid` state should be set.
220
+ */
221
+ _shouldSetInvalid(_invalid: boolean): boolean;
199
222
 
200
223
  /**
201
- * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
224
+ * Validates the field and sets the `invalid` property based on the result.
225
+ *
226
+ * The method fires a `validated` event with the result of the validation.
202
227
  *
203
228
  * @returns True if the value is valid.
204
229
  */
@@ -210,24 +235,15 @@ declare class DateTimePickerElement extends ElementMixin(ThemableMixin(HTMLEleme
210
235
  * You can override the `checkValidity` method for custom validations.
211
236
  */
212
237
  checkValidity(): boolean;
213
-
214
- addEventListener<K extends keyof DateTimePickerEventMap>(
215
- type: K,
216
- listener: (this: DateTimePickerElement, ev: DateTimePickerEventMap[K]) => void,
217
- options?: boolean | AddEventListenerOptions
218
- ): void;
219
-
220
- removeEventListener<K extends keyof DateTimePickerEventMap>(
221
- type: K,
222
- listener: (this: DateTimePickerElement, ev: DateTimePickerEventMap[K]) => void,
223
- options?: boolean | EventListenerOptions
224
- ): void;
225
238
  }
226
239
 
227
240
  declare global {
241
+
228
242
  interface HTMLElementTagNameMap {
229
- 'vaadin-date-time-picker': DateTimePickerElement;
243
+ "vaadin-date-time-picker": DateTimePicker;
230
244
  }
231
245
  }
232
246
 
233
- export { DateTimePickerElement };
247
+ export {DateTimePicker};
248
+
249
+ import {DateTimePickerI18n} from '../@types/interfaces';
package/src/vaadin-date-time-picker.js CHANGED
@@ -1,15 +1,31 @@
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';
7
- import { dateEquals } from '@vaadin/vaadin-date-picker/src/vaadin-date-picker-helper.js';
2
+ @license
3
+ Copyright (c) 2019 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
+
8
+ import { DatePickerHelper } from '@vaadin/vaadin-date-picker/src/vaadin-date-picker-helper.js';
8
9
  import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
9
10
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
11
  import './vaadin-date-time-picker-custom-field.js';
11
12
  import './vaadin-date-time-picker-date-picker.js';
12
13
  import './vaadin-date-time-picker-time-picker.js';
14
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
15
+ const $_documentContainer = document.createElement('template');
16
+
17
+ $_documentContainer.innerHTML = `<dom-module id="date-time-picker-custom-field" theme-for="vaadin-date-time-picker-custom-field">
18
+ <template>
19
+ <style>
20
+ :host,
21
+ .container {
22
+ width: 100%;
23
+ }
24
+ </style>
25
+ </template>
26
+ </dom-module>`;
27
+
28
+ document.head.appendChild($_documentContainer.content);
13
29
 
14
30
  /**
15
31
  * @typedef {object} TimePickerTime
@@ -20,7 +36,7 @@ import './vaadin-date-time-picker-time-picker.js';
20
36
  */
21
37
 
22
38
  // Find a property definition from the prototype chain of a Polymer element class
23
- const getPropertyFromPrototype = function (clazz, prop) {
39
+ const getPropertyFromPrototype = function(clazz, prop) {
24
40
  while (clazz) {
25
41
  if (clazz.properties && clazz.properties[prop]) {
26
42
  return clazz.properties[prop];
@@ -83,76 +99,60 @@ const timePickerI18nProps = Object.keys(timePickerI18nDefaults);
83
99
  * Note: the `theme` attribute value set on `<vaadin-date-time-picker>` is
84
100
  * propagated to the internal themable components listed above.
85
101
  *
86
- * @fires {Event} change - Fired when the user commits a value change.
87
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
88
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
89
- *
90
- * @extends HTMLElement
102
+ * @extends PolymerElement
91
103
  * @mixes ElementMixin
92
104
  * @mixes ThemableMixin
105
+ * @demo demo/index.html
93
106
  */
94
- class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement)) {
107
+ class DateTimePicker extends ElementMixin(ThemableMixin(PolymerElement)) {
95
108
  static get template() {
96
109
  return html`
97
- <style>
98
- :host {
99
- display: inline-block;
100
- }
101
-
102
- :host([hidden]) {
103
- display: none !important;
104
- }
105
-
106
- .slot-container {
107
- display: flex;
108
- }
109
-
110
- [part='date'],
111
- .slot-container ::slotted([slot='date-picker']) {
112
- pointer-events: all;
113
- min-width: 0;
114
- flex: 1 1 auto;
115
- }
116
-
117
- [part='time'],
118
- .slot-container ::slotted([slot='time-picker']) {
119
- pointer-events: all;
120
- min-width: 0;
121
- flex: 1 1.65 auto;
122
- }
123
- </style>
124
- <vaadin-date-time-picker-custom-field
125
- id="customField"
126
- on-value-changed="__customFieldValueChanged"
127
- i18n="[[__customFieldValueFormat]]"
128
- label="[[label]]"
129
- theme$="[[theme]]"
130
- invalid="[[invalid]]"
131
- required="[[required]]"
132
- disabled$="[[disabled]]"
133
- readonly$="[[readonly]]"
134
- error-message="[[errorMessage]]"
135
- helper-text="[[helperText]]"
136
- >
137
- <div class="slot-container">
138
- <slot name="date-picker" id="dateSlot">
139
- <vaadin-date-time-picker-date-picker part="date" theme$="[[theme]]"></vaadin-date-time-picker-date-picker>
140
- </slot>
141
- <slot name="time-picker" id="timeSlot">
142
- <vaadin-date-time-picker-time-picker part="time" theme$="[[theme]]"></vaadin-date-time-picker-time-picker>
143
- </slot>
144
- </div>
145
- <slot name="helper" slot="helper">[[helperText]]</slot>
146
- </vaadin-date-time-picker-custom-field>
147
- `;
110
+ <style>
111
+ :host {
112
+ display: inline-block;
113
+ }
114
+
115
+ :host([hidden]) {
116
+ display: none !important;
117
+ }
118
+
119
+ .slot-container {
120
+ display: flex;
121
+ }
122
+
123
+ [part="date"],
124
+ .slot-container ::slotted([slot="date-picker"]) {
125
+ pointer-events: all;
126
+ min-width: 0;
127
+ flex: 1 1 auto;
128
+ }
129
+
130
+ [part="time"],
131
+ .slot-container ::slotted([slot="time-picker"]) {
132
+ pointer-events: all;
133
+ min-width: 0;
134
+ flex: 1 1.65 auto;
135
+ }
136
+ </style>
137
+ <vaadin-date-time-picker-custom-field id="customField" on-value-changed="__customFieldValueChanged" i18n="[[__customFieldValueFormat]]" label="[[label]]" theme\$="[[theme]]" invalid="[[invalid]]" required="[[required]]" disabled\$="[[disabled]]" readonly\$="[[readonly]]" error-message="[[errorMessage]]" helper-text="[[helperText]]">
138
+ <div class="slot-container">
139
+ <slot name="date-picker" id="dateSlot">
140
+ <vaadin-date-time-picker-date-picker part="date" theme\$="[[theme]]"></vaadin-date-time-picker-date-picker>
141
+ </slot>
142
+ <slot name="time-picker" id="timeSlot">
143
+ <vaadin-date-time-picker-time-picker part="time" theme\$="[[theme]]"></vaadin-date-time-picker-time-picker>
144
+ </slot>
145
+ </div>
146
+ <slot name="helper" slot="helper">[[helperText]]</slot>
147
+ </vaadin-date-time-picker-custom-field>
148
+ `;
148
149
  }
149
150
 
150
151
  static get is() {
151
152
  return 'vaadin-date-time-picker';
152
153
  }
153
-
154
154
  static get version() {
155
- return '2.0.0';
155
+ return '2.1.0';
156
156
  }
157
157
 
158
158
  static get properties() {
@@ -372,8 +372,8 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
372
372
  __customFieldValueFormat: {
373
373
  type: Object,
374
374
  value: () => ({
375
- parseValue: (combinedValue) => combinedValue.split('T'),
376
- formatValue: (inputValues) => inputValues.join('T')
375
+ parseValue: combinedValue => combinedValue.split('T'),
376
+ formatValue: inputValues => inputValues.join('T')
377
377
  })
378
378
  },
379
379
 
@@ -426,14 +426,14 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
426
426
  ready() {
427
427
  super.ready();
428
428
 
429
- this.addEventListener('focusout', (e) => {
429
+ this.addEventListener('focusout', e => {
430
430
  if (e.relatedTarget !== this.__datePicker.$.overlay) {
431
431
  this.validate();
432
432
  }
433
433
  });
434
434
 
435
435
  this.__changeEventHandler = this.__changeEventHandler.bind(this);
436
- this.__filterElements = (node) => node.nodeType === Node.ELEMENT_NODE;
436
+ this.__filterElements = node => node.nodeType === Node.ELEMENT_NODE;
437
437
 
438
438
  this.__datePickerChanged();
439
439
  this.__timePickerChanged();
@@ -454,9 +454,8 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
454
454
  /** @private */
455
455
  __syncI18n(target, source, props) {
456
456
  props = props || Object.keys(source.i18n);
457
- props.forEach((prop) => {
458
- // eslint-disable-next-line no-prototype-builtins
459
- if (source.i18n && source.i18n.hasOwnProperty(prop)) {
457
+ props.forEach(prop => {
458
+ if (source.i18n.hasOwnProperty(prop)) {
460
459
  target.set(`i18n.${prop}`, source.i18n[prop]);
461
460
  }
462
461
  });
@@ -468,17 +467,15 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
468
467
  /** @private */
469
468
  __updateCustomFieldInputs() {
470
469
  const cfInputs = this.$.customField.inputs;
471
- if (
472
- this.__datePicker &&
473
- this.__timePicker &&
474
- (cfInputs[0] !== this.__datePicker || cfInputs[1] !== this.__timePicker)
470
+ if (this.__datePicker && this.__timePicker
471
+ && (cfInputs[0] !== this.__datePicker || cfInputs[1] !== this.__timePicker)
475
472
  ) {
476
473
  this.$.customField._setInputs([this.__datePicker, this.__timePicker]);
477
474
  }
478
475
  }
479
476
 
480
477
  /** @private */
481
- __changeEventHandler() {
478
+ __changeEventHandler(event) {
482
479
  this.__doDispatchChange = true;
483
480
  }
484
481
 
@@ -497,7 +494,7 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
497
494
  /** @private */
498
495
  __datePickerChanged() {
499
496
  const defaultDatePicker = this.shadowRoot.querySelector('[part="date"]');
500
- const assignedElements = this.$.dateSlot.assignedNodes({ flatten: true }).filter(this.__filterElements);
497
+ const assignedElements = this.$.dateSlot.assignedNodes({flatten: true}).filter(this.__filterElements);
501
498
  const datePicker = assignedElements[0];
502
499
  if (this.__datePicker === datePicker) {
503
500
  return;
@@ -539,7 +536,7 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
539
536
  /** @private */
540
537
  __timePickerChanged() {
541
538
  const defaultTimePicker = this.shadowRoot.querySelector('[part="time"]');
542
- const assignedElements = this.$.timeSlot.assignedNodes({ flatten: true }).filter(this.__filterElements);
539
+ const assignedElements = this.$.timeSlot.assignedNodes({flatten: true}).filter(this.__filterElements);
543
540
  const timePicker = assignedElements[0];
544
541
  if (this.__timePicker === timePicker) {
545
542
  return;
@@ -577,17 +574,18 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
577
574
  /** @private */
578
575
  __updateTimePickerMinMax() {
579
576
  if (this.__timePicker && this.__datePicker) {
577
+ const dateEquals = DatePickerHelper._dateEquals;
580
578
  const selectedDate = this.__parseDate(this.__datePicker.value);
581
579
  const isMinMaxSameDay = dateEquals(this.__minDateTime, this.__maxDateTime);
582
580
  const oldTimeValue = this.__timePicker.value;
583
581
 
584
- if ((this.__minDateTime && dateEquals(selectedDate, this.__minDateTime)) || isMinMaxSameDay) {
582
+ if (this.__minDateTime && dateEquals(selectedDate, this.__minDateTime) || isMinMaxSameDay) {
585
583
  this.__timePicker.min = this.__dateToIsoTimeString(this.__minDateTime);
586
584
  } else {
587
585
  this.__timePicker.min = this.__defaultTimeMinValue;
588
586
  }
589
587
 
590
- if ((this.__maxDateTime && dateEquals(selectedDate, this.__maxDateTime)) || isMinMaxSameDay) {
588
+ if (this.__maxDateTime && dateEquals(selectedDate, this.__maxDateTime) || isMinMaxSameDay) {
591
589
  this.__timePicker.max = this.__dateToIsoTimeString(this.__maxDateTime);
592
590
  } else {
593
591
  this.__timePicker.max = this.__defaultTimeMaxValue;
@@ -644,7 +642,7 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
644
642
  /** @private */
645
643
  __triggerCustomFieldValueUpdate() {
646
644
  if (this.__timePicker) {
647
- this.__timePicker.dispatchEvent(new CustomEvent('change', { bubbles: true }));
645
+ this.__timePicker.dispatchEvent(new CustomEvent('change', {bubbles: true}));
648
646
  }
649
647
  }
650
648
 
@@ -801,14 +799,12 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
801
799
  * @private
802
800
  */
803
801
  __dateToIsoTimeString(date) {
804
- return this.__formatTimeISO(
805
- this.__validateTime({
806
- hours: date.getHours(),
807
- minutes: date.getMinutes(),
808
- seconds: date.getSeconds(),
809
- milliseconds: date.getMilliseconds()
810
- })
811
- );
802
+ return this.__formatTimeISO(this.__validateTime({
803
+ hours: date.getHours(),
804
+ minutes: date.getMinutes(),
805
+ seconds: date.getSeconds(),
806
+ milliseconds: date.getMilliseconds()
807
+ }));
812
808
  }
813
809
 
814
810
  /**
@@ -825,12 +821,38 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
825
821
  }
826
822
 
827
823
  /**
828
- * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
824
+ * @param {boolean} invalid
825
+ * @protected
826
+ */
827
+ _setInvalid(invalid) {
828
+ if (this._shouldSetInvalid(invalid)) {
829
+ this.invalid = invalid;
830
+ }
831
+ }
832
+
833
+ /**
834
+ * Override this method to define whether the given `invalid` state should be set.
835
+ *
836
+ * @param {boolean} _invalid
837
+ * @return {boolean}
838
+ * @protected
839
+ */
840
+ _shouldSetInvalid(_invalid) {
841
+ return true;
842
+ }
843
+
844
+ /**
845
+ * Validates the field and sets the `invalid` property based on the result.
846
+ *
847
+ * The method fires a `validated` event with the result of the validation.
829
848
  *
830
849
  * @return {boolean} True if the value is valid.
831
850
  */
832
851
  validate() {
833
- return !(this.invalid = !this.checkValidity());
852
+ const isValid = this.checkValidity();
853
+ this._setInvalid(!isValid);
854
+ this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
855
+ return isValid;
834
856
  }
835
857
 
836
858
  /**
@@ -840,8 +862,9 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
840
862
  * @return {boolean}
841
863
  */
842
864
  checkValidity() {
843
- const hasInvalidFields = this.$.customField.inputs.filter((input) => !input.checkValidity.call(input)).length > 0;
844
- const hasEmptyFields = this.required && this.$.customField.inputs.filter((el) => !el.value).length > 0;
865
+ const hasInvalidFields = this.$.customField.inputs
866
+ .filter(input => !(input.checkValidity).call(input)).length > 0;
867
+ const hasEmptyFields = this.required && this.$.customField.inputs.filter(el => !el.value).length > 0;
845
868
 
846
869
  if (hasInvalidFields || hasEmptyFields) {
847
870
  return false;
@@ -850,8 +873,8 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
850
873
  }
851
874
 
852
875
  // Copied from vaadin-time-picker
876
+ /* istanbul ignore next */
853
877
  /** @private */
854
- // eslint-disable-next-line getter-return
855
878
  get __stepSegment() {
856
879
  const step = this.step == undefined ? 60 : parseFloat(this.step);
857
880
  if (step % 3600 === 0) {
@@ -876,15 +899,13 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
876
899
  * @private
877
900
  */
878
901
  __dateTimeEquals(date1, date2) {
879
- if (!dateEquals(date1, date2)) {
902
+ if (!DatePickerHelper._dateEquals(date1, date2)) {
880
903
  return false;
881
904
  }
882
- return (
883
- date1.getHours() === date2.getHours() &&
884
- date1.getMinutes() === date2.getMinutes() &&
885
- date1.getSeconds() === date2.getSeconds() &&
886
- date1.getMilliseconds() === date2.getMilliseconds()
887
- );
905
+ return date1.getHours() === date2.getHours() &&
906
+ date1.getMinutes() === date2.getMinutes() &&
907
+ date1.getSeconds() === date2.getSeconds() &&
908
+ date1.getMilliseconds() === date2.getMilliseconds();
888
909
  }
889
910
 
890
911
  /** @private */
@@ -896,8 +917,7 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
896
917
  }
897
918
 
898
919
  const dateTime = this.__parseDateTime(value);
899
- if (!dateTime) {
900
- // Invalid date, revert to old value
920
+ if (!dateTime) { // Invalid date, revert to old value
901
921
  this[property] = oldValue;
902
922
  return;
903
923
  }
@@ -914,11 +934,12 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
914
934
  this.__dispatchChange();
915
935
  this.validate();
916
936
  }
937
+
917
938
  }
918
939
 
919
940
  /** @private */
920
941
  __dispatchChange() {
921
- this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
942
+ this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
922
943
  }
923
944
 
924
945
  /** @private */
@@ -951,8 +972,7 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
951
972
  // happen before date picker ready() which would throw an error when date picker is trying to read
952
973
  // `this.$.input` (as a result of value change triggered by setting custom field value).
953
974
  // Workaround the problem by setting custom field value only if date picker is ready.
954
- const inputs = this.$.customField.inputs;
955
- const isDatePickerReady = Boolean(inputs && inputs[0] && inputs[0].$);
975
+ const isDatePickerReady = !!this.$.customField.inputs[0].$;
956
976
  if (isDatePickerReady) {
957
977
  const doDispatchChange = this.__doDispatchChange;
958
978
 
@@ -1010,8 +1030,16 @@ class DateTimePickerElement extends ElementMixin(ThemableMixin(PolymerElement))
1010
1030
  *
1011
1031
  * @event change
1012
1032
  */
1033
+
1034
+ /**
1035
+ * Fired whenever the field is validated.
1036
+ *
1037
+ * @event validated
1038
+ * @param {Object} detail
1039
+ * @param {boolean} detail.valid the result of the validation.
1040
+ */
1013
1041
  }
1014
1042
 
1015
- customElements.define(DateTimePickerElement.is, DateTimePickerElement);
1043
+ customElements.define(DateTimePicker.is, DateTimePicker);
1016
1044
 
1017
- export { DateTimePickerElement };
1045
+ export { DateTimePicker };
package/theme/lumo/vaadin-date-time-picker-styles.js CHANGED
@@ -1,56 +1,54 @@
1
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
2
1
  import '@vaadin/vaadin-custom-field/theme/lumo/vaadin-custom-field.js';
3
2
  import '@vaadin/vaadin-date-picker/theme/lumo/vaadin-date-picker.js';
4
3
  import '@vaadin/vaadin-time-picker/theme/lumo/vaadin-time-picker.js';
4
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
5
5
 
6
- registerStyles(
7
- 'vaadin-date-time-picker-date-text-field',
8
- css`
9
- [part~='input-field'] {
10
- border-top-right-radius: 0;
11
- border-bottom-right-radius: 0;
12
- }
6
+ const $_documentContainer = html`<dom-module id="lumo-date-time-picker-date-text-field" theme-for="vaadin-date-time-picker-date-text-field">
7
+ <template>
8
+ <style>
9
+ [part~="input-field"] {
10
+ border-top-right-radius: 0;
11
+ border-bottom-right-radius: 0;
12
+ }
13
13
 
14
- /* RTL specific styles */
15
- :host([dir='rtl']) [part~='input-field'] {
16
- border-radius: var(--lumo-border-radius);
17
- border-top-left-radius: 0;
18
- border-bottom-left-radius: 0;
19
- }
20
- `,
21
- { moduleId: 'lumo-date-time-picker-date-text-field' }
22
- );
14
+ /* RTL specific styles */
15
+ :host([dir="rtl"]) [part~="input-field"] {
16
+ border-radius: var(--lumo-border-radius);
17
+ border-top-left-radius: 0;
18
+ border-bottom-left-radius: 0;
19
+ }
20
+ </style>
21
+ </template>
22
+ </dom-module><dom-module id="lumo-date-time-picker-time-text-field" theme-for="vaadin-date-time-picker-time-text-field">
23
+ <template>
24
+ <style>
25
+ [part~="input-field"] {
26
+ border-top-left-radius: 0;
27
+ border-bottom-left-radius: 0;
28
+ }
23
29
 
24
- registerStyles(
25
- 'vaadin-date-time-picker-time-text-field',
26
- css`
27
- [part~='input-field'] {
28
- border-top-left-radius: 0;
29
- border-bottom-left-radius: 0;
30
- }
30
+ /* RTL specific styles */
31
+ :host([dir="rtl"]) [part~="input-field"] {
32
+ border-radius: var(--lumo-border-radius);
33
+ border-top-right-radius: 0;
34
+ border-bottom-right-radius: 0;
35
+ }
36
+ </style>
37
+ </template>
38
+ </dom-module><dom-module id="lumo-date-time-picker-date-picker" theme-for="vaadin-date-time-picker-date-picker">
39
+ <template>
40
+ <style>
41
+ :host {
42
+ margin-right: 2px;
43
+ }
31
44
 
32
- /* RTL specific styles */
33
- :host([dir='rtl']) [part~='input-field'] {
34
- border-radius: var(--lumo-border-radius);
35
- border-top-right-radius: 0;
36
- border-bottom-right-radius: 0;
37
- }
38
- `,
39
- { moduleId: 'lumo-date-time-picker-time-text-field' }
40
- );
45
+ /* RTL specific styles */
46
+ :host([dir="rtl"]) {
47
+ margin-right: auto;
48
+ margin-left: 2px;
49
+ }
50
+ </style>
51
+ </template>
52
+ </dom-module>`;
41
53
 
42
- registerStyles(
43
- 'vaadin-date-time-picker-date-picker',
44
- css`
45
- :host {
46
- margin-right: 2px;
47
- }
48
-
49
- /* RTL specific styles */
50
- :host([dir='rtl']) {
51
- margin-right: auto;
52
- margin-left: 2px;
53
- }
54
- `,
55
- { moduleId: 'lumo-date-time-picker-date-picker' }
56
- );
54
+ document.head.appendChild($_documentContainer.content);
package/vaadin-date-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-date-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-date-time-picker.js';
2
- export * from './src/interfaces';
15
+ export * from './@types/interfaces';
package/src/interfaces.d.ts DELETED
@@ -1,22 +0,0 @@
1
- import { DatePickerI18n } from '@vaadin/vaadin-date-picker';
2
- import { TimePickerI18n } from '@vaadin/vaadin-time-picker';
3
-
4
- export interface DateTimePickerI18n extends DatePickerI18n, TimePickerI18n {}
5
-
6
- /**
7
- * Fired when the `invalid` property changes.
8
- */
9
- export type DateTimePickerInvalidChanged = CustomEvent<{ value: boolean }>;
10
-
11
- /**
12
- * Fired when the `value` property changes.
13
- */
14
- export type DateTimePickerValueChanged = CustomEvent<{ value: string }>;
15
-
16
- export interface DateTimePickerElementEventMap {
17
- 'invalid-changed': DateTimePickerInvalidChanged;
18
-
19
- 'value-changed': DateTimePickerValueChanged;
20
- }
21
-
22
- export interface DateTimePickerEventMap extends DateTimePickerElementEventMap, HTMLElementEventMap {}