@vaadin/time-picker 22.0.0-alpha9 → 22.0.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 (9) hide show
  1. package/README.md +25 -24
  2. package/package.json +10 -10
  3. package/src/vaadin-time-picker-combo-box.js +2 -2
  4. package/src/vaadin-time-picker-dropdown.js +2 -2
  5. package/src/vaadin-time-picker-overlay.js +1 -1
  6. package/src/vaadin-time-picker.d.ts +13 -22
  7. package/src/vaadin-time-picker.js +20 -30
  8. package/theme/lumo/vaadin-time-picker-styles.js +1 -1
  9. package/theme/material/vaadin-time-picker-styles.js +1 -1
package/README.md CHANGED
@@ -1,54 +1,54 @@
1
- # <vaadin-time-picker>
1
+ # @vaadin/time-picker
2
2
 
3
- [<vaadin-time-picker>](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).
3
+ A web component that allows to enter a time, either by typing, or by selecting from a set of pre-defined options.
4
4
 
5
- [Live Demo ↗](https://vaadin.com/components/vaadin-time-picker/html-examples)
6
- |
7
- [API documentation ↗](https://vaadin.com/components/vaadin-time-picker/html-api)
5
+ [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/time-picker)
8
6
 
9
7
  [![npm version](https://badgen.net/npm/v/@vaadin/time-picker)](https://www.npmjs.com/package/@vaadin/time-picker)
10
- [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
11
8
  [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
12
9
 
13
10
  ```html
14
11
  <vaadin-time-picker label="Delivery Time"></vaadin-time-picker>
15
12
  ```
16
13
 
17
- [<img src="https://raw.githubusercontent.com/vaadin/vaadin-time-picker/master/screenshot.gif" alt="Screenshot of vaadin-time-picker">](https://vaadin.com/components/vaadin-time-picker)
14
+ [<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/time-picker/screenshot.png" width="215" alt="Screenshot of vaadin-time-picker">](https://vaadin.com/docs/latest/ds/components/time-picker)
18
15
 
19
16
  ## Installation
20
17
 
21
- Install `vaadin-time-picker`:
18
+ Install the component:
22
19
 
23
20
  ```sh
24
- npm i @vaadin/time-picker --save
21
+ npm i @vaadin/time-picker
25
22
  ```
26
23
 
27
- Once installed, import it in your application:
24
+ Once installed, import the component in your application:
28
25
 
29
26
  ```js
30
- import '@vaadin/time-picker/vaadin-time-picker.js';
27
+ import '@vaadin/time-picker';
31
28
  ```
32
29
 
33
- ## Getting Started
30
+ ## Themes
34
31
 
35
- Vaadin components use the Lumo theme by default.
32
+ Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
33
+ The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/time-picker/vaadin-time-picker.js) of the package uses the Lumo theme.
36
34
 
37
- To use the Material theme, import the correspondent file from the `theme/material` folder.
35
+ To use the Material theme, import the component from the `theme/material` folder:
38
36
 
39
- ## Entry points
40
-
41
- - The component with the Lumo theme:
42
-
43
- `theme/lumo/vaadin-time-picker.js`
37
+ ```js
38
+ import '@vaadin/time-picker/theme/material/vaadin-time-picker.js';
39
+ ```
44
40
 
45
- - The component with the Material theme:
41
+ You can also import the Lumo version of the component explicitly:
46
42
 
47
- `theme/material/vaadin-time-picker.js`
43
+ ```js
44
+ import '@vaadin/time-picker/theme/lumo/vaadin-time-picker.js';
45
+ ```
48
46
 
49
- - Alias for `theme/lumo/vaadin-time-picker.js`:
47
+ Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
50
48
 
51
- `vaadin-time-picker.js`
49
+ ```js
50
+ import '@vaadin/time-picker/src/vaadin-time-picker.js';
51
+ ```
52
52
 
53
53
  ## Contributing
54
54
 
@@ -58,4 +58,5 @@ Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/
58
58
 
59
59
  Apache License 2.0
60
60
 
61
- Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
61
+ Vaadin collects usage statistics at development time to improve this product.
62
+ For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/time-picker",
3
- "version": "22.0.0-alpha9",
3
+ "version": "22.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -33,18 +33,18 @@
33
33
  ],
34
34
  "dependencies": {
35
35
  "@polymer/polymer": "^3.0.0",
36
- "@vaadin/combo-box": "22.0.0-alpha9",
37
- "@vaadin/component-base": "22.0.0-alpha9",
38
- "@vaadin/field-base": "22.0.0-alpha9",
39
- "@vaadin/input-container": "22.0.0-alpha9",
40
- "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
41
- "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
42
- "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
36
+ "@vaadin/combo-box": "^22.0.0",
37
+ "@vaadin/component-base": "^22.0.0",
38
+ "@vaadin/field-base": "^22.0.0",
39
+ "@vaadin/input-container": "^22.0.0",
40
+ "@vaadin/vaadin-lumo-styles": "^22.0.0",
41
+ "@vaadin/vaadin-material-styles": "^22.0.0",
42
+ "@vaadin/vaadin-themable-mixin": "^22.0.0"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@esm-bundle/chai": "^4.3.4",
46
- "@vaadin/testing-helpers": "^0.3.0",
46
+ "@vaadin/testing-helpers": "^0.3.2",
47
47
  "sinon": "^9.2.0"
48
48
  },
49
- "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
49
+ "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
50
50
  }
package/src/vaadin-time-picker-combo-box.js CHANGED
@@ -3,10 +3,10 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
6
+ import './vaadin-time-picker-dropdown.js';
7
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
8
  import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
8
9
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
- import './vaadin-time-picker-dropdown.js';
10
10
 
11
11
  /**
12
12
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
package/src/vaadin-time-picker-dropdown.js CHANGED
@@ -3,11 +3,11 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html } from '@polymer/polymer/lib/utils/html-tag.js';
7
- import { ComboBoxDropdown } from '@vaadin/combo-box/src/vaadin-combo-box-dropdown.js';
8
6
  import './vaadin-time-picker-item.js';
9
7
  import './vaadin-time-picker-overlay.js';
10
8
  import './vaadin-time-picker-scroller.js';
9
+ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
10
+ import { ComboBoxDropdown } from '@vaadin/combo-box/src/vaadin-combo-box-dropdown.js';
11
11
 
12
12
  /**
13
13
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
package/src/vaadin-time-picker-overlay.js CHANGED
@@ -4,7 +4,7 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ComboBoxOverlay } from '@vaadin/combo-box/src/vaadin-combo-box-overlay.js';
7
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
+ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
8
8
 
9
9
  registerStyles(
10
10
  'vaadin-time-picker-overlay',
package/src/vaadin-time-picker.d.ts CHANGED
@@ -56,33 +56,19 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
56
56
  *
57
57
  * The following custom properties are available for styling:
58
58
  *
59
- * Custom property | Description | Default
60
- * ------------------------------------------|----------------------------|---------
61
- * `--vaadin-field-default-width` | Default width of the field | `12em`
62
- * `--vaadin-time-picker-overlay-max-height` | Max height of the overlay | `65vh`
59
+ * Custom property | Description | Default
60
+ * ----------------------------------------|----------------------------|---------
61
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
62
+ * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
63
63
  *
64
- * The following shadow DOM parts are available for styling:
64
+ * `<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
65
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
66
+ *
67
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
65
68
  *
66
69
  * Part name | Description
67
70
  * ----------------|----------------
68
- * `clear-button` | The clear button
69
- * `input-field` | Input element wrapper
70
71
  * `toggle-button` | The toggle button
71
- * `label` | The label element
72
- * `error-message` | The error message element
73
- * `helper-text` | The helper text element wrapper
74
- *
75
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
76
- *
77
- * The following state attributes are available for styling:
78
- *
79
- * Attribute | Description | Part name
80
- * -------------|------------------------------------------|------------
81
- * `disabled` | Set to a disabled time picker | :host
82
- * `readonly` | Set to a read only time picker | :host
83
- * `invalid` | Set when the element is invalid | :host
84
- * `focused` | Set when the element is focused | :host
85
- * `focus-ring` | Set when the element is keyboard focused | :host
86
72
  *
87
73
  * ### Internal components
88
74
  *
@@ -90,10 +76,15 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
90
76
  * components are themable:
91
77
  *
92
78
  * - `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light).
79
+ * - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
80
+ * - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
81
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
93
82
  *
94
83
  * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
95
84
  * propagated to the internal components listed above.
96
85
  *
86
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
87
+ *
97
88
  * @fires {Event} change - Fired when the user commits a value change.
98
89
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
99
90
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
package/src/vaadin-time-picker.js CHANGED
@@ -3,17 +3,16 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
6
+ import '@vaadin/input-container/src/vaadin-input-container.js';
7
+ import './vaadin-time-picker-combo-box.js';
8
+ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
9
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
8
- import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
9
- import { InputController } from '@vaadin/field-base/src/input-controller.js';
10
10
  import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
11
+ import { InputController } from '@vaadin/field-base/src/input-controller.js';
12
+ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
11
13
  import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
12
14
  import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
13
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
14
- import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
15
- import '@vaadin/input-container/src/vaadin-input-container.js';
16
- import './vaadin-time-picker-combo-box.js';
15
+ import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
17
16
 
18
17
  registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-picker-styles' });
19
18
 
@@ -33,33 +32,19 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
33
32
  *
34
33
  * The following custom properties are available for styling:
35
34
  *
36
- * Custom property | Description | Default
37
- * ------------------------------------------|----------------------------|---------
38
- * `--vaadin-field-default-width` | Default width of the field | `12em`
39
- * `--vaadin-time-picker-overlay-max-height` | Max height of the overlay | `65vh`
35
+ * Custom property | Description | Default
36
+ * ----------------------------------------|----------------------------|---------
37
+ * `--vaadin-field-default-width` | Default width of the field | `12em`
38
+ * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`
39
+ *
40
+ * `<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
41
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
40
42
  *
41
- * The following shadow DOM parts are available for styling:
43
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
42
44
  *
43
45
  * Part name | Description
44
46
  * ----------------|----------------
45
- * `clear-button` | The clear button
46
- * `input-field` | Input element wrapper
47
47
  * `toggle-button` | The toggle button
48
- * `label` | The label element
49
- * `error-message` | The error message element
50
- * `helper-text` | The helper text element wrapper
51
- *
52
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
53
- *
54
- * The following state attributes are available for styling:
55
- *
56
- * Attribute | Description | Part name
57
- * -------------|------------------------------------------|------------
58
- * `disabled` | Set to a disabled time picker | :host
59
- * `readonly` | Set to a read only time picker | :host
60
- * `invalid` | Set when the element is invalid | :host
61
- * `focused` | Set when the element is focused | :host
62
- * `focus-ring` | Set when the element is keyboard focused | :host
63
48
  *
64
49
  * ### Internal components
65
50
  *
@@ -67,10 +52,15 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
67
52
  * components are themable:
68
53
  *
69
54
  * - `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light).
55
+ * - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
56
+ * - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
57
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
70
58
  *
71
59
  * Note: the `theme` attribute value set on `<vaadin-time-picker>` is
72
60
  * propagated to the internal components listed above.
73
61
  *
62
+ * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
63
+ *
74
64
  * @fires {Event} change - Fired when the user commits a value change.
75
65
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
76
66
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
@@ -330,7 +320,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
330
320
  this.ariaTarget = input;
331
321
  })
332
322
  );
333
- this.addController(new AriaLabelController(this.inputElement, this._labelNode));
323
+ this.addController(new LabelledInputController(this.inputElement, this._labelNode));
334
324
  this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
335
325
  }
336
326
 
package/theme/lumo/vaadin-time-picker-styles.js CHANGED
@@ -3,9 +3,9 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
6
  import '@vaadin/vaadin-lumo-styles/font-icons.js';
8
7
  import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
8
+ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
9
 
10
10
  const timePicker = css`
11
11
  [part~='toggle-button']::before {
package/theme/material/vaadin-time-picker-styles.js CHANGED
@@ -3,9 +3,9 @@
3
3
  * Copyright (c) 2021 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
6
  import '@vaadin/vaadin-material-styles/font-icons.js';
8
7
  import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
8
+ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
9
9
 
10
10
  const timePicker = css`
11
11
  [part~='toggle-button']::before {