@vaadin/time-picker 25.3.0-rc1 → 25.4.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/custom-elements.json +9 -9
- package/package.json +14 -14
- package/src/vaadin-time-picker-mixin.d.ts +4 -2
- package/src/vaadin-time-picker-mixin.js +8 -7
- package/src/vaadin-time-picker.d.ts +3 -0
- package/src/vaadin-time-picker.js +3 -0
- package/web-types.json +5 -4
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -313,9 +313,9 @@
|
|
|
313
313
|
"name": "i18n",
|
|
314
314
|
"privacy": "public",
|
|
315
315
|
"type": {
|
|
316
|
-
"text": "Object"
|
|
316
|
+
"text": "Object | undefined"
|
|
317
317
|
},
|
|
318
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
318
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides both the\ntime parsing and formatting functions.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
|
|
319
319
|
"attribute": "i18n",
|
|
320
320
|
"inheritedFrom": {
|
|
321
321
|
"name": "I18nMixin",
|
|
@@ -694,9 +694,9 @@
|
|
|
694
694
|
{
|
|
695
695
|
"name": "i18n",
|
|
696
696
|
"type": {
|
|
697
|
-
"text": "Object"
|
|
697
|
+
"text": "Object | undefined"
|
|
698
698
|
},
|
|
699
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
699
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
700
700
|
"fieldName": "i18n",
|
|
701
701
|
"inheritedFrom": {
|
|
702
702
|
"name": "I18nMixin",
|
|
@@ -910,7 +910,7 @@
|
|
|
910
910
|
"declarations": [
|
|
911
911
|
{
|
|
912
912
|
"kind": "class",
|
|
913
|
-
"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",
|
|
913
|
+
"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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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",
|
|
914
914
|
"name": "TimePicker",
|
|
915
915
|
"members": [
|
|
916
916
|
{
|
|
@@ -1104,9 +1104,9 @@
|
|
|
1104
1104
|
"name": "i18n",
|
|
1105
1105
|
"privacy": "public",
|
|
1106
1106
|
"type": {
|
|
1107
|
-
"text": "Object"
|
|
1107
|
+
"text": "Object | undefined"
|
|
1108
1108
|
},
|
|
1109
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
1109
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides both the\ntime parsing and formatting functions.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
|
|
1110
1110
|
"attribute": "i18n",
|
|
1111
1111
|
"inheritedFrom": {
|
|
1112
1112
|
"name": "I18nMixin",
|
|
@@ -1521,9 +1521,9 @@
|
|
|
1521
1521
|
{
|
|
1522
1522
|
"name": "i18n",
|
|
1523
1523
|
"type": {
|
|
1524
|
-
"text": "Object"
|
|
1524
|
+
"text": "Object | undefined"
|
|
1525
1525
|
},
|
|
1526
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
1526
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
1527
1527
|
"fieldName": "i18n",
|
|
1528
1528
|
"inheritedFrom": {
|
|
1529
1529
|
"name": "I18nMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.4.0-alpha1",
|
|
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.
|
|
39
|
-
"@vaadin/combo-box": "25.
|
|
40
|
-
"@vaadin/component-base": "25.
|
|
41
|
-
"@vaadin/field-base": "25.
|
|
42
|
-
"@vaadin/input-container": "25.
|
|
43
|
-
"@vaadin/item": "25.
|
|
44
|
-
"@vaadin/overlay": "25.
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.
|
|
38
|
+
"@vaadin/a11y-base": "25.4.0-alpha1",
|
|
39
|
+
"@vaadin/combo-box": "25.4.0-alpha1",
|
|
40
|
+
"@vaadin/component-base": "25.4.0-alpha1",
|
|
41
|
+
"@vaadin/field-base": "25.4.0-alpha1",
|
|
42
|
+
"@vaadin/input-container": "25.4.0-alpha1",
|
|
43
|
+
"@vaadin/item": "25.4.0-alpha1",
|
|
44
|
+
"@vaadin/overlay": "25.4.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha1",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/aura": "25.
|
|
50
|
-
"@vaadin/chai-plugins": "25.
|
|
51
|
-
"@vaadin/test-runner-commands": "25.
|
|
49
|
+
"@vaadin/aura": "25.4.0-alpha1",
|
|
50
|
+
"@vaadin/chai-plugins": "25.4.0-alpha1",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha1",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "25.
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha1",
|
|
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": "be38ec1866e96508f3f4591f95c949ef55903a34"
|
|
62
62
|
}
|
|
@@ -103,9 +103,11 @@ export declare class TimePickerMixinClass {
|
|
|
103
103
|
|
|
104
104
|
/**
|
|
105
105
|
* The object used to localize this component. To change the default
|
|
106
|
-
* localization,
|
|
106
|
+
* localization, set this to an object that provides both the
|
|
107
107
|
* time parsing and formatting functions.
|
|
108
108
|
*
|
|
109
|
+
* When not set, defaults to `undefined`.
|
|
110
|
+
*
|
|
109
111
|
* The object has the following JSON structure:
|
|
110
112
|
*
|
|
111
113
|
* ```js
|
|
@@ -135,5 +137,5 @@ export declare class TimePickerMixinClass {
|
|
|
135
137
|
* ISO 8601 format, and are never passed to `parseTime`, so implementations
|
|
136
138
|
* do not need to accept ISO 8601 input.
|
|
137
139
|
*/
|
|
138
|
-
i18n: TimePickerI18n;
|
|
140
|
+
i18n: TimePickerI18n | undefined;
|
|
139
141
|
}
|
|
@@ -136,9 +136,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
136
136
|
|
|
137
137
|
/**
|
|
138
138
|
* The object used to localize this component. To change the default
|
|
139
|
-
* localization,
|
|
139
|
+
* localization, set this to an object that provides both the
|
|
140
140
|
* time parsing and formatting functions.
|
|
141
141
|
*
|
|
142
|
+
* When not set, defaults to `undefined`.
|
|
143
|
+
*
|
|
142
144
|
* The object has the following JSON structure:
|
|
143
145
|
*
|
|
144
146
|
* ```js
|
|
@@ -168,7 +170,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
168
170
|
* ISO 8601 format, and are never passed to `parseTime`, so implementations
|
|
169
171
|
* do not need to accept ISO 8601 input.
|
|
170
172
|
*
|
|
171
|
-
* @type {
|
|
173
|
+
* @type {TimePickerI18n | undefined}
|
|
172
174
|
*/
|
|
173
175
|
get i18n() {
|
|
174
176
|
return super.i18n;
|
|
@@ -309,11 +311,10 @@ export const TimePickerMixin = (superClass) =>
|
|
|
309
311
|
* @override
|
|
310
312
|
*/
|
|
311
313
|
_commitValue() {
|
|
312
|
-
if (this.
|
|
313
|
-
// Commit value based on
|
|
314
|
-
|
|
315
|
-
this.
|
|
316
|
-
this._focusedIndex = -1;
|
|
314
|
+
if (this._hasHighlightedItem) {
|
|
315
|
+
// Commit value based on the highlighted item
|
|
316
|
+
this.__setValueFromTime(parseISOTime(this._highlightedItem.value));
|
|
317
|
+
this._clearItemHighlight();
|
|
317
318
|
} else if (this._inputElementValue !== this._comboBoxValue) {
|
|
318
319
|
// Committing text that did not change would parse and format it again,
|
|
319
320
|
// and set the value from the result, so skip it.
|
|
@@ -127,6 +127,9 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
127
127
|
* | `--vaadin-input-field-helper-font-size` |
|
|
128
128
|
* | `--vaadin-input-field-helper-font-weight` |
|
|
129
129
|
* | `--vaadin-input-field-helper-line-height` |
|
|
130
|
+
* | `--vaadin-input-field-label-aside-gap` |
|
|
131
|
+
* | `--vaadin-input-field-label-aside-text-align` |
|
|
132
|
+
* | `--vaadin-input-field-label-aside-width` |
|
|
130
133
|
* | `--vaadin-input-field-label-color` |
|
|
131
134
|
* | `--vaadin-input-field-label-font-size` |
|
|
132
135
|
* | `--vaadin-input-field-label-font-weight` |
|
|
@@ -87,6 +87,9 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
|
87
87
|
* | `--vaadin-input-field-helper-font-size` |
|
|
88
88
|
* | `--vaadin-input-field-helper-font-weight` |
|
|
89
89
|
* | `--vaadin-input-field-helper-line-height` |
|
|
90
|
+
* | `--vaadin-input-field-label-aside-gap` |
|
|
91
|
+
* | `--vaadin-input-field-label-aside-text-align` |
|
|
92
|
+
* | `--vaadin-input-field-label-aside-width` |
|
|
90
93
|
* | `--vaadin-input-field-label-color` |
|
|
91
94
|
* | `--vaadin-input-field-label-font-size` |
|
|
92
95
|
* | `--vaadin-input-field-label-font-weight` |
|
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.
|
|
4
|
+
"version": "25.4.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 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.
|
|
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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.4.0-alpha1/#/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-description-ref",
|
|
@@ -348,10 +348,11 @@
|
|
|
348
348
|
},
|
|
349
349
|
{
|
|
350
350
|
"name": "i18n",
|
|
351
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
351
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides both the\ntime parsing and formatting functions.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
|
|
352
352
|
"value": {
|
|
353
353
|
"type": [
|
|
354
|
-
"Object"
|
|
354
|
+
"Object",
|
|
355
|
+
"undefined"
|
|
355
356
|
]
|
|
356
357
|
}
|
|
357
358
|
},
|
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.
|
|
4
|
+
"version": "25.4.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 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.
|
|
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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.4.0-alpha1/#/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
|
{
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
"name": ".i18n",
|
|
101
|
-
"description": "The object used to localize this component. To change the default\nlocalization,
|
|
101
|
+
"description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides both the\ntime parsing and formatting functions.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
|
|
102
102
|
"value": {
|
|
103
103
|
"kind": "expression"
|
|
104
104
|
}
|