@vaadin/time-picker 24.6.0-beta1 → 24.7.0-alpha1
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.
- package/package.json +12 -12
- package/src/vaadin-lit-time-picker-combo-box.js +0 -21
- package/src/vaadin-lit-time-picker-overlay.js +0 -16
- package/src/vaadin-lit-time-picker.js +0 -43
- package/src/vaadin-time-picker-combo-box.js +0 -21
- package/src/vaadin-time-picker-mixin.js +39 -0
- package/src/vaadin-time-picker.js +0 -41
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.7.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/combo-box": "24.
|
|
41
|
-
"@vaadin/component-base": "24.
|
|
42
|
-
"@vaadin/field-base": "24.
|
|
43
|
-
"@vaadin/input-container": "24.
|
|
44
|
-
"@vaadin/item": "24.
|
|
45
|
-
"@vaadin/overlay": "24.
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "24.
|
|
47
|
-
"@vaadin/vaadin-material-styles": "24.
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "24.
|
|
40
|
+
"@vaadin/combo-box": "24.7.0-alpha1",
|
|
41
|
+
"@vaadin/component-base": "24.7.0-alpha1",
|
|
42
|
+
"@vaadin/field-base": "24.7.0-alpha1",
|
|
43
|
+
"@vaadin/input-container": "24.7.0-alpha1",
|
|
44
|
+
"@vaadin/item": "24.7.0-alpha1",
|
|
45
|
+
"@vaadin/overlay": "24.7.0-alpha1",
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "24.7.0-alpha1",
|
|
47
|
+
"@vaadin/vaadin-material-styles": "24.7.0-alpha1",
|
|
48
|
+
"@vaadin/vaadin-themable-mixin": "24.7.0-alpha1",
|
|
49
49
|
"lit": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vaadin/chai-plugins": "24.
|
|
52
|
+
"@vaadin/chai-plugins": "24.7.0-alpha1",
|
|
53
53
|
"@vaadin/testing-helpers": "^1.0.0",
|
|
54
54
|
"sinon": "^18.0.0"
|
|
55
55
|
},
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"web-types.json",
|
|
58
58
|
"web-types.lit.json"
|
|
59
59
|
],
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "04be941c9a7b659871c97f31b9cc3ffd7528087b"
|
|
61
61
|
}
|
|
@@ -61,27 +61,6 @@ class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolylitMixin(LitEle
|
|
|
61
61
|
return this.querySelector('[part="clear-button"]');
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
/**
|
|
65
|
-
* @override
|
|
66
|
-
* @protected
|
|
67
|
-
*/
|
|
68
|
-
get _inputElementValue() {
|
|
69
|
-
return super._inputElementValue;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* The setter is overridden to ensure the `_hasInputValue` property
|
|
74
|
-
* doesn't wrongly indicate true after the input element's value
|
|
75
|
-
* is reverted or cleared programmatically.
|
|
76
|
-
*
|
|
77
|
-
* @override
|
|
78
|
-
* @protected
|
|
79
|
-
*/
|
|
80
|
-
set _inputElementValue(value) {
|
|
81
|
-
super._inputElementValue = value;
|
|
82
|
-
this._hasInputValue = value && value.length > 0;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
64
|
/** @protected */
|
|
86
65
|
render() {
|
|
87
66
|
return html`
|
|
@@ -45,22 +45,6 @@ export class TimePickerOverlay extends ComboBoxOverlayMixin(
|
|
|
45
45
|
return [overlayStyles, timePickerOverlayStyles];
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
static get properties() {
|
|
49
|
-
return {
|
|
50
|
-
/**
|
|
51
|
-
* When true, the overlay is visible and attached to body.
|
|
52
|
-
* This property config is overridden to set `sync: true`.
|
|
53
|
-
*/
|
|
54
|
-
opened: {
|
|
55
|
-
type: Boolean,
|
|
56
|
-
notify: true,
|
|
57
|
-
observer: '_openedChanged',
|
|
58
|
-
reflectToAttribute: true,
|
|
59
|
-
sync: true,
|
|
60
|
-
},
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
|
|
64
48
|
/** @protected */
|
|
65
49
|
render() {
|
|
66
50
|
return html`
|
|
@@ -10,9 +10,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
10
10
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
12
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
|
-
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
14
|
-
import { InputController } from '@vaadin/field-base/src/input-controller.js';
|
|
15
|
-
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
|
|
16
13
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
17
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
18
15
|
import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
@@ -52,15 +49,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
|
|
|
52
49
|
];
|
|
53
50
|
}
|
|
54
51
|
|
|
55
|
-
static get properties() {
|
|
56
|
-
return {
|
|
57
|
-
/** @private */
|
|
58
|
-
_inputContainer: {
|
|
59
|
-
type: Object,
|
|
60
|
-
},
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
|
|
64
52
|
/** @protected */
|
|
65
53
|
render() {
|
|
66
54
|
return html`
|
|
@@ -114,37 +102,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
|
|
|
114
102
|
`;
|
|
115
103
|
}
|
|
116
104
|
|
|
117
|
-
/** @protected */
|
|
118
|
-
firstUpdated() {
|
|
119
|
-
super.firstUpdated();
|
|
120
|
-
|
|
121
|
-
this.addController(
|
|
122
|
-
new InputController(
|
|
123
|
-
this,
|
|
124
|
-
(input) => {
|
|
125
|
-
this._setInputElement(input);
|
|
126
|
-
this._setFocusElement(input);
|
|
127
|
-
this.stateTarget = input;
|
|
128
|
-
this.ariaTarget = input;
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
// The "search" word is a trick to prevent Safari from enabling AutoFill,
|
|
132
|
-
// which is causing click issues:
|
|
133
|
-
// https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
|
|
134
|
-
uniqueIdPrefix: 'search-input',
|
|
135
|
-
},
|
|
136
|
-
),
|
|
137
|
-
);
|
|
138
|
-
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
139
|
-
this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
|
|
140
|
-
|
|
141
|
-
this._tooltipController = new TooltipController(this);
|
|
142
|
-
this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
|
|
143
|
-
this._tooltipController.setPosition('top');
|
|
144
|
-
this._tooltipController.setAriaTarget(this.inputElement);
|
|
145
|
-
this.addController(this._tooltipController);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
105
|
/** @private */
|
|
149
106
|
__onComboBoxOpenedChanged(event) {
|
|
150
107
|
this.opened = event.detail.value;
|
|
@@ -73,27 +73,6 @@ class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolymerElement)) {
|
|
|
73
73
|
return this.querySelector('[part="clear-button"]');
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
/**
|
|
77
|
-
* @override
|
|
78
|
-
* @protected
|
|
79
|
-
*/
|
|
80
|
-
get _inputElementValue() {
|
|
81
|
-
return super._inputElementValue;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* The setter is overridden to ensure the `_hasInputValue` property
|
|
86
|
-
* doesn't wrongly indicate true after the input element's value
|
|
87
|
-
* is reverted or cleared programmatically.
|
|
88
|
-
*
|
|
89
|
-
* @override
|
|
90
|
-
* @protected
|
|
91
|
-
*/
|
|
92
|
-
set _inputElementValue(value) {
|
|
93
|
-
super._inputElementValue = value;
|
|
94
|
-
this._hasInputValue = value.length > 0;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
76
|
/** @protected */
|
|
98
77
|
ready() {
|
|
99
78
|
super.ready();
|
|
@@ -3,7 +3,10 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2024 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
+
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
6
7
|
import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
|
|
8
|
+
import { InputController } from '@vaadin/field-base/src/input-controller.js';
|
|
9
|
+
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
|
|
7
10
|
import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
|
|
8
11
|
import { formatISOTime, parseISOTime, validateTime } from './vaadin-time-picker-helper.js';
|
|
9
12
|
|
|
@@ -171,6 +174,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
171
174
|
type: Array,
|
|
172
175
|
sync: true,
|
|
173
176
|
},
|
|
177
|
+
|
|
178
|
+
/** @private */
|
|
179
|
+
_inputContainer: {
|
|
180
|
+
type: Object,
|
|
181
|
+
},
|
|
174
182
|
};
|
|
175
183
|
}
|
|
176
184
|
|
|
@@ -208,6 +216,37 @@ export const TimePickerMixin = (superClass) =>
|
|
|
208
216
|
return '';
|
|
209
217
|
}
|
|
210
218
|
|
|
219
|
+
/** @protected */
|
|
220
|
+
ready() {
|
|
221
|
+
super.ready();
|
|
222
|
+
|
|
223
|
+
this.addController(
|
|
224
|
+
new InputController(
|
|
225
|
+
this,
|
|
226
|
+
(input) => {
|
|
227
|
+
this._setInputElement(input);
|
|
228
|
+
this._setFocusElement(input);
|
|
229
|
+
this.stateTarget = input;
|
|
230
|
+
this.ariaTarget = input;
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
// The "search" word is a trick to prevent Safari from enabling AutoFill,
|
|
234
|
+
// which is causing click issues:
|
|
235
|
+
// https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
|
|
236
|
+
uniqueIdPrefix: 'search-input',
|
|
237
|
+
},
|
|
238
|
+
),
|
|
239
|
+
);
|
|
240
|
+
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
241
|
+
this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
|
|
242
|
+
|
|
243
|
+
this._tooltipController = new TooltipController(this);
|
|
244
|
+
this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
|
|
245
|
+
this._tooltipController.setPosition('top');
|
|
246
|
+
this._tooltipController.setAriaTarget(this.inputElement);
|
|
247
|
+
this.addController(this._tooltipController);
|
|
248
|
+
}
|
|
249
|
+
|
|
211
250
|
/**
|
|
212
251
|
* Override method inherited from `InputMixin` to forward the input to combo-box.
|
|
213
252
|
* @protected
|
|
@@ -8,9 +8,6 @@ import './vaadin-time-picker-combo-box.js';
|
|
|
8
8
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
-
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
|
-
import { InputController } from '@vaadin/field-base/src/input-controller.js';
|
|
13
|
-
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
|
|
14
11
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
15
12
|
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
16
13
|
import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
@@ -166,44 +163,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolymerEleme
|
|
|
166
163
|
<slot name="tooltip"></slot>
|
|
167
164
|
`;
|
|
168
165
|
}
|
|
169
|
-
|
|
170
|
-
static get properties() {
|
|
171
|
-
return {
|
|
172
|
-
/** @private */
|
|
173
|
-
_inputContainer: Object,
|
|
174
|
-
};
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
/** @protected */
|
|
178
|
-
ready() {
|
|
179
|
-
super.ready();
|
|
180
|
-
|
|
181
|
-
this.addController(
|
|
182
|
-
new InputController(
|
|
183
|
-
this,
|
|
184
|
-
(input) => {
|
|
185
|
-
this._setInputElement(input);
|
|
186
|
-
this._setFocusElement(input);
|
|
187
|
-
this.stateTarget = input;
|
|
188
|
-
this.ariaTarget = input;
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
// The "search" word is a trick to prevent Safari from enabling AutoFill,
|
|
192
|
-
// which is causing click issues:
|
|
193
|
-
// https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
|
|
194
|
-
uniqueIdPrefix: 'search-input',
|
|
195
|
-
},
|
|
196
|
-
),
|
|
197
|
-
);
|
|
198
|
-
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
199
|
-
this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
|
|
200
|
-
|
|
201
|
-
this._tooltipController = new TooltipController(this);
|
|
202
|
-
this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
|
|
203
|
-
this._tooltipController.setPosition('top');
|
|
204
|
-
this._tooltipController.setAriaTarget(this.inputElement);
|
|
205
|
-
this.addController(this._tooltipController);
|
|
206
|
-
}
|
|
207
166
|
}
|
|
208
167
|
|
|
209
168
|
defineCustomElement(TimePicker);
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.7.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-time-picker",
|
|
11
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
11
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "24.
|
|
4
|
+
"version": "24.7.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-time-picker",
|
|
19
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.
|
|
19
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|