@vaadin/time-picker 25.2.8 → 25.2.10
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/custom-elements.json +1 -1
- package/package.json +14 -14
- package/src/vaadin-time-picker-mixin.js +32 -20
- package/src/vaadin-time-picker.d.ts +42 -8
- package/src/vaadin-time-picker.js +42 -8
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -884,7 +884,7 @@
|
|
|
884
884
|
"declarations": [
|
|
885
885
|
{
|
|
886
886
|
"kind": "class",
|
|
887
|
-
"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
|
|
887
|
+
"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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\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",
|
|
888
888
|
"name": "TimePicker",
|
|
889
889
|
"members": [
|
|
890
890
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "25.2.
|
|
3
|
+
"version": "25.2.10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "~25.2.
|
|
39
|
-
"@vaadin/combo-box": "~25.2.
|
|
40
|
-
"@vaadin/component-base": "~25.2.
|
|
41
|
-
"@vaadin/field-base": "~25.2.
|
|
42
|
-
"@vaadin/input-container": "~25.2.
|
|
43
|
-
"@vaadin/item": "~25.2.
|
|
44
|
-
"@vaadin/overlay": "~25.2.
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "~25.2.
|
|
38
|
+
"@vaadin/a11y-base": "~25.2.10",
|
|
39
|
+
"@vaadin/combo-box": "~25.2.10",
|
|
40
|
+
"@vaadin/component-base": "~25.2.10",
|
|
41
|
+
"@vaadin/field-base": "~25.2.10",
|
|
42
|
+
"@vaadin/input-container": "~25.2.10",
|
|
43
|
+
"@vaadin/item": "~25.2.10",
|
|
44
|
+
"@vaadin/overlay": "~25.2.10",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "~25.2.10",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/aura": "~25.2.
|
|
50
|
-
"@vaadin/chai-plugins": "~25.2.
|
|
51
|
-
"@vaadin/test-runner-commands": "~25.2.
|
|
49
|
+
"@vaadin/aura": "~25.2.10",
|
|
50
|
+
"@vaadin/chai-plugins": "~25.2.10",
|
|
51
|
+
"@vaadin/test-runner-commands": "~25.2.10",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "~25.2.
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "~25.2.10",
|
|
54
54
|
"sinon": "^22.0.0"
|
|
55
55
|
},
|
|
56
56
|
"customElements": "custom-elements.json",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"web-types.json",
|
|
59
59
|
"web-types.lit.json"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "7715101508f7e689bd77354322fb80b3d7ad402d"
|
|
62
62
|
}
|
|
@@ -110,7 +110,6 @@ export const TimePickerMixin = (superClass) =>
|
|
|
110
110
|
'_openedOrItemsChanged(opened, _dropdownItems)',
|
|
111
111
|
'_updateScroller(opened, _dropdownItems, _focusedIndex, _theme, _comboBoxValue)',
|
|
112
112
|
'__updateAriaAttributes(_dropdownItems, opened, inputElement)',
|
|
113
|
-
'__updateDropdownItems(__effectiveI18n, min, max, step)',
|
|
114
113
|
];
|
|
115
114
|
}
|
|
116
115
|
|
|
@@ -230,6 +229,23 @@ export const TimePickerMixin = (superClass) =>
|
|
|
230
229
|
this.addController(this._tooltipController);
|
|
231
230
|
}
|
|
232
231
|
|
|
232
|
+
/** @protected */
|
|
233
|
+
updated(props) {
|
|
234
|
+
super.updated(props);
|
|
235
|
+
|
|
236
|
+
if (['__effectiveI18n', 'min', 'max', 'step'].some((prop) => props.has(prop))) {
|
|
237
|
+
this.__updateDropdownItems();
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
if (props.has('step')) {
|
|
241
|
+
this.__updateValue(this.__getTimeObject(this.value));
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
if (props.has('__effectiveI18n') && this.value) {
|
|
245
|
+
this.__updateInputValue(this.__getTimeObject(this.value));
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
233
249
|
/**
|
|
234
250
|
* Returns true if the current input value satisfies all constraints (if any).
|
|
235
251
|
* You can override this method for custom validations.
|
|
@@ -457,6 +473,15 @@ export const TimePickerMixin = (superClass) =>
|
|
|
457
473
|
return result;
|
|
458
474
|
}
|
|
459
475
|
|
|
476
|
+
/**
|
|
477
|
+
* Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
|
|
478
|
+
* from an ISO 8601 time, stripped to the resolution defined by the step.
|
|
479
|
+
* @private
|
|
480
|
+
*/
|
|
481
|
+
__getTimeObject(timeString) {
|
|
482
|
+
return validateTime(parseISOTime(timeString), this.step);
|
|
483
|
+
}
|
|
484
|
+
|
|
460
485
|
/**
|
|
461
486
|
* Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
|
|
462
487
|
* @private
|
|
@@ -503,25 +528,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
503
528
|
}
|
|
504
529
|
|
|
505
530
|
/** @private */
|
|
506
|
-
__updateDropdownItems(
|
|
507
|
-
const
|
|
508
|
-
const
|
|
509
|
-
|
|
510
|
-
const maxTimeObj = validateTime(parseISOTime(max || MAX_ALLOWED_TIME), step);
|
|
511
|
-
const maxSec = this.__getSec(maxTimeObj);
|
|
531
|
+
__updateDropdownItems() {
|
|
532
|
+
const minSec = this.__getSec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
|
|
533
|
+
const maxSec = this.__getSec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
|
|
512
534
|
|
|
513
|
-
this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
|
|
514
|
-
|
|
515
|
-
const parsedValue = validateTime(parseISOTime(this.value), step);
|
|
516
|
-
|
|
517
|
-
if (step !== this.__oldStep) {
|
|
518
|
-
this.__oldStep = step;
|
|
519
|
-
this.__updateValue(parsedValue);
|
|
520
|
-
}
|
|
521
|
-
|
|
522
|
-
if (this.value) {
|
|
523
|
-
this._comboBoxValue = effectiveI18n.formatTime(parsedValue);
|
|
524
|
-
}
|
|
535
|
+
this._dropdownItems = this.__generateDropdownList(minSec, maxSec, this.step);
|
|
525
536
|
}
|
|
526
537
|
|
|
527
538
|
/** @private */
|
|
@@ -569,7 +580,8 @@ export const TimePickerMixin = (superClass) =>
|
|
|
569
580
|
* @override
|
|
570
581
|
*/
|
|
571
582
|
_valueChanged(value, oldValue) {
|
|
572
|
-
|
|
583
|
+
// Strip value to the step resolution before marking as committed.
|
|
584
|
+
const parsedObj = (this.__memoValue = this.__getTimeObject(value));
|
|
573
585
|
const newValue = formatISOTime(parsedObj) || '';
|
|
574
586
|
|
|
575
587
|
// Mark value set programmatically by the user
|
|
@@ -72,14 +72,6 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
72
72
|
*
|
|
73
73
|
* ### Styling
|
|
74
74
|
*
|
|
75
|
-
* The following custom properties are available for styling:
|
|
76
|
-
*
|
|
77
|
-
* Custom property | Description | Default
|
|
78
|
-
* -----------------------------------------|----------------------------|---------
|
|
79
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
80
|
-
* `--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`
|
|
81
|
-
* `--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`
|
|
82
|
-
*
|
|
83
75
|
* The following shadow DOM parts are available for styling:
|
|
84
76
|
*
|
|
85
77
|
* Part name | Description
|
|
@@ -111,6 +103,48 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
111
103
|
* `readonly` | Set when the element is readonly
|
|
112
104
|
* `opened` | Set when the overlay is opened
|
|
113
105
|
*
|
|
106
|
+
* The following custom CSS properties are available for styling:
|
|
107
|
+
*
|
|
108
|
+
* Custom CSS property |
|
|
109
|
+
* :--------------------------------------------------|
|
|
110
|
+
* | `--vaadin-field-default-width` |
|
|
111
|
+
* | `--vaadin-input-field-background` |
|
|
112
|
+
* | `--vaadin-input-field-border-color` |
|
|
113
|
+
* | `--vaadin-input-field-border-radius` |
|
|
114
|
+
* | `--vaadin-input-field-border-width` |
|
|
115
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
116
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
117
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
118
|
+
* | `--vaadin-input-field-container-gap` |
|
|
119
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
120
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
121
|
+
* | `--vaadin-input-field-error-color` |
|
|
122
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
123
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
124
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
125
|
+
* | `--vaadin-input-field-gap` |
|
|
126
|
+
* | `--vaadin-input-field-helper-color` |
|
|
127
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
128
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
129
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
130
|
+
* | `--vaadin-input-field-label-color` |
|
|
131
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
132
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
133
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
134
|
+
* | `--vaadin-input-field-padding` |
|
|
135
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
136
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
137
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
138
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
139
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
140
|
+
* | `--vaadin-input-field-value-color` |
|
|
141
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
142
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
143
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
144
|
+
* | `--vaadin-item-overlay-padding` |
|
|
145
|
+
* | `--vaadin-time-picker-overlay-max-height` |
|
|
146
|
+
* | `--vaadin-time-picker-overlay-width` |
|
|
147
|
+
*
|
|
114
148
|
* ### Internal components
|
|
115
149
|
*
|
|
116
150
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
|
@@ -32,14 +32,6 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
|
32
32
|
*
|
|
33
33
|
* ### Styling
|
|
34
34
|
*
|
|
35
|
-
* The following custom properties are available for styling:
|
|
36
|
-
*
|
|
37
|
-
* Custom property | Description | Default
|
|
38
|
-
* -----------------------------------------|----------------------------|---------
|
|
39
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
40
|
-
* `--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`
|
|
41
|
-
* `--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`
|
|
42
|
-
*
|
|
43
35
|
* The following shadow DOM parts are available for styling:
|
|
44
36
|
*
|
|
45
37
|
* Part name | Description
|
|
@@ -71,6 +63,48 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
|
71
63
|
* `readonly` | Set when the element is readonly
|
|
72
64
|
* `opened` | Set when the overlay is opened
|
|
73
65
|
*
|
|
66
|
+
* The following custom CSS properties are available for styling:
|
|
67
|
+
*
|
|
68
|
+
* Custom CSS property |
|
|
69
|
+
* :--------------------------------------------------|
|
|
70
|
+
* | `--vaadin-field-default-width` |
|
|
71
|
+
* | `--vaadin-input-field-background` |
|
|
72
|
+
* | `--vaadin-input-field-border-color` |
|
|
73
|
+
* | `--vaadin-input-field-border-radius` |
|
|
74
|
+
* | `--vaadin-input-field-border-width` |
|
|
75
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
76
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
77
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
78
|
+
* | `--vaadin-input-field-container-gap` |
|
|
79
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
80
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
81
|
+
* | `--vaadin-input-field-error-color` |
|
|
82
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
83
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
84
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
85
|
+
* | `--vaadin-input-field-gap` |
|
|
86
|
+
* | `--vaadin-input-field-helper-color` |
|
|
87
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
88
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
89
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
90
|
+
* | `--vaadin-input-field-label-color` |
|
|
91
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
92
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
93
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
94
|
+
* | `--vaadin-input-field-padding` |
|
|
95
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
96
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
97
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
98
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
99
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
100
|
+
* | `--vaadin-input-field-value-color` |
|
|
101
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
102
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
103
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
104
|
+
* | `--vaadin-item-overlay-padding` |
|
|
105
|
+
* | `--vaadin-time-picker-overlay-max-height` |
|
|
106
|
+
* | `--vaadin-time-picker-overlay-width` |
|
|
107
|
+
*
|
|
74
108
|
* ### Internal components
|
|
75
109
|
*
|
|
76
110
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
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": "25.2.
|
|
4
|
+
"version": "25.2.10",
|
|
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
|
|
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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.10/#/elements/vaadin-item).\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": "accessible-name",
|
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": "25.2.
|
|
4
|
+
"version": "25.2.10",
|
|
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
|
|
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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.10/#/elements/vaadin-item).\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
|
{
|