@vaadin/time-picker 25.3.0-dev.1fa5a51482 → 25.3.0-rc1
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 +64 -12
- package/package.json +14 -14
- package/src/vaadin-time-picker-helper.d.ts +3 -0
- package/src/vaadin-time-picker-helper.js +15 -7
- package/src/vaadin-time-picker-item.js +3 -3
- package/src/vaadin-time-picker-mixin.d.ts +5 -0
- package/src/vaadin-time-picker-mixin.js +106 -128
- package/src/vaadin-time-picker-overlay.js +3 -1
- package/src/vaadin-time-picker-scroller.js +3 -1
- package/src/vaadin-time-picker.d.ts +42 -8
- package/src/vaadin-time-picker.js +42 -8
- package/web-types.json +25 -7
- package/web-types.lit.json +12 -5
package/custom-elements.json
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
],
|
|
77
|
-
"description": "A function to validate the time object based on the given step.",
|
|
77
|
+
"description": "A function to validate the time object based on the given step.\n\nReturns a new object, so that a time object owned by the caller, such as one\nreturned by the `i18n.parseTime` function, is left as it is.",
|
|
78
78
|
"return": {
|
|
79
79
|
"type": {
|
|
80
80
|
"text": "object | undefined"
|
|
@@ -122,6 +122,20 @@
|
|
|
122
122
|
"description": "A mixin providing common time-picker functionality.",
|
|
123
123
|
"name": "TimePickerMixin",
|
|
124
124
|
"members": [
|
|
125
|
+
{
|
|
126
|
+
"kind": "field",
|
|
127
|
+
"name": "accessibleDescriptionRef",
|
|
128
|
+
"privacy": "public",
|
|
129
|
+
"type": {
|
|
130
|
+
"text": "string"
|
|
131
|
+
},
|
|
132
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
133
|
+
"attribute": "accessible-description-ref",
|
|
134
|
+
"inheritedFrom": {
|
|
135
|
+
"name": "FieldMixin",
|
|
136
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
137
|
+
}
|
|
138
|
+
},
|
|
125
139
|
{
|
|
126
140
|
"kind": "field",
|
|
127
141
|
"name": "accessibleName",
|
|
@@ -129,7 +143,7 @@
|
|
|
129
143
|
"type": {
|
|
130
144
|
"text": "string"
|
|
131
145
|
},
|
|
132
|
-
"description": "String used to label the component
|
|
146
|
+
"description": "String used to label the component for screen reader users.",
|
|
133
147
|
"attribute": "accessible-name",
|
|
134
148
|
"inheritedFrom": {
|
|
135
149
|
"name": "FieldMixin",
|
|
@@ -143,7 +157,7 @@
|
|
|
143
157
|
"type": {
|
|
144
158
|
"text": "string"
|
|
145
159
|
},
|
|
146
|
-
"description": "
|
|
160
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
147
161
|
"attribute": "accessible-name-ref",
|
|
148
162
|
"inheritedFrom": {
|
|
149
163
|
"name": "FieldMixin",
|
|
@@ -301,7 +315,7 @@
|
|
|
301
315
|
"type": {
|
|
302
316
|
"text": "Object"
|
|
303
317
|
},
|
|
304
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
318
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
305
319
|
"attribute": "i18n",
|
|
306
320
|
"inheritedFrom": {
|
|
307
321
|
"name": "I18nMixin",
|
|
@@ -545,12 +559,24 @@
|
|
|
545
559
|
}
|
|
546
560
|
],
|
|
547
561
|
"attributes": [
|
|
562
|
+
{
|
|
563
|
+
"name": "accessible-description-ref",
|
|
564
|
+
"type": {
|
|
565
|
+
"text": "string"
|
|
566
|
+
},
|
|
567
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
568
|
+
"fieldName": "accessibleDescriptionRef",
|
|
569
|
+
"inheritedFrom": {
|
|
570
|
+
"name": "FieldMixin",
|
|
571
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
572
|
+
}
|
|
573
|
+
},
|
|
548
574
|
{
|
|
549
575
|
"name": "accessible-name",
|
|
550
576
|
"type": {
|
|
551
577
|
"text": "string"
|
|
552
578
|
},
|
|
553
|
-
"description": "String used to label the component
|
|
579
|
+
"description": "String used to label the component for screen reader users.",
|
|
554
580
|
"fieldName": "accessibleName",
|
|
555
581
|
"inheritedFrom": {
|
|
556
582
|
"name": "FieldMixin",
|
|
@@ -562,7 +588,7 @@
|
|
|
562
588
|
"type": {
|
|
563
589
|
"text": "string"
|
|
564
590
|
},
|
|
565
|
-
"description": "
|
|
591
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
566
592
|
"fieldName": "accessibleNameRef",
|
|
567
593
|
"inheritedFrom": {
|
|
568
594
|
"name": "FieldMixin",
|
|
@@ -884,9 +910,23 @@
|
|
|
884
910
|
"declarations": [
|
|
885
911
|
{
|
|
886
912
|
"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
|
|
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",
|
|
888
914
|
"name": "TimePicker",
|
|
889
915
|
"members": [
|
|
916
|
+
{
|
|
917
|
+
"kind": "field",
|
|
918
|
+
"name": "accessibleDescriptionRef",
|
|
919
|
+
"privacy": "public",
|
|
920
|
+
"type": {
|
|
921
|
+
"text": "string"
|
|
922
|
+
},
|
|
923
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
924
|
+
"attribute": "accessible-description-ref",
|
|
925
|
+
"inheritedFrom": {
|
|
926
|
+
"name": "FieldMixin",
|
|
927
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
928
|
+
}
|
|
929
|
+
},
|
|
890
930
|
{
|
|
891
931
|
"kind": "field",
|
|
892
932
|
"name": "accessibleName",
|
|
@@ -894,7 +934,7 @@
|
|
|
894
934
|
"type": {
|
|
895
935
|
"text": "string"
|
|
896
936
|
},
|
|
897
|
-
"description": "String used to label the component
|
|
937
|
+
"description": "String used to label the component for screen reader users.",
|
|
898
938
|
"attribute": "accessible-name",
|
|
899
939
|
"inheritedFrom": {
|
|
900
940
|
"name": "FieldMixin",
|
|
@@ -908,7 +948,7 @@
|
|
|
908
948
|
"type": {
|
|
909
949
|
"text": "string"
|
|
910
950
|
},
|
|
911
|
-
"description": "
|
|
951
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
912
952
|
"attribute": "accessible-name-ref",
|
|
913
953
|
"inheritedFrom": {
|
|
914
954
|
"name": "FieldMixin",
|
|
@@ -1066,7 +1106,7 @@
|
|
|
1066
1106
|
"type": {
|
|
1067
1107
|
"text": "Object"
|
|
1068
1108
|
},
|
|
1069
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
1109
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
1070
1110
|
"attribute": "i18n",
|
|
1071
1111
|
"inheritedFrom": {
|
|
1072
1112
|
"name": "I18nMixin",
|
|
@@ -1346,12 +1386,24 @@
|
|
|
1346
1386
|
}
|
|
1347
1387
|
],
|
|
1348
1388
|
"attributes": [
|
|
1389
|
+
{
|
|
1390
|
+
"name": "accessible-description-ref",
|
|
1391
|
+
"type": {
|
|
1392
|
+
"text": "string"
|
|
1393
|
+
},
|
|
1394
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
1395
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1396
|
+
"inheritedFrom": {
|
|
1397
|
+
"name": "FieldMixin",
|
|
1398
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1399
|
+
}
|
|
1400
|
+
},
|
|
1349
1401
|
{
|
|
1350
1402
|
"name": "accessible-name",
|
|
1351
1403
|
"type": {
|
|
1352
1404
|
"text": "string"
|
|
1353
1405
|
},
|
|
1354
|
-
"description": "String used to label the component
|
|
1406
|
+
"description": "String used to label the component for screen reader users.",
|
|
1355
1407
|
"fieldName": "accessibleName",
|
|
1356
1408
|
"inheritedFrom": {
|
|
1357
1409
|
"name": "FieldMixin",
|
|
@@ -1363,7 +1415,7 @@
|
|
|
1363
1415
|
"type": {
|
|
1364
1416
|
"text": "string"
|
|
1365
1417
|
},
|
|
1366
|
-
"description": "
|
|
1418
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1367
1419
|
"fieldName": "accessibleNameRef",
|
|
1368
1420
|
"inheritedFrom": {
|
|
1369
1421
|
"name": "FieldMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-rc1",
|
|
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.3.0-
|
|
39
|
-
"@vaadin/combo-box": "25.3.0-
|
|
40
|
-
"@vaadin/component-base": "25.3.0-
|
|
41
|
-
"@vaadin/field-base": "25.3.0-
|
|
42
|
-
"@vaadin/input-container": "25.3.0-
|
|
43
|
-
"@vaadin/item": "25.3.0-
|
|
44
|
-
"@vaadin/overlay": "25.3.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-rc1",
|
|
39
|
+
"@vaadin/combo-box": "25.3.0-rc1",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-rc1",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-rc1",
|
|
42
|
+
"@vaadin/input-container": "25.3.0-rc1",
|
|
43
|
+
"@vaadin/item": "25.3.0-rc1",
|
|
44
|
+
"@vaadin/overlay": "25.3.0-rc1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/aura": "25.3.0-
|
|
50
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
51
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
49
|
+
"@vaadin/aura": "25.3.0-rc1",
|
|
50
|
+
"@vaadin/chai-plugins": "25.3.0-rc1",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.3.0-rc1",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
|
|
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": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
|
|
62
62
|
}
|
|
@@ -25,6 +25,9 @@ export function parseISOTime(timeString: string): TimePickerTime | undefined;
|
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* A function to validate the time object based on the given step.
|
|
28
|
+
*
|
|
29
|
+
* Returns a new object, so that a time object owned by the caller, such as one
|
|
30
|
+
* returned by the `i18n.parseTime` function, is left as it is.
|
|
28
31
|
*/
|
|
29
32
|
export function validateTime(
|
|
30
33
|
timeObject: TimePickerTime | undefined,
|
|
@@ -75,17 +75,25 @@ function getStepSegment(stepValue) {
|
|
|
75
75
|
/**
|
|
76
76
|
* A function to validate the time object based on the given step.
|
|
77
77
|
*
|
|
78
|
+
* Returns a new object, so that a time object owned by the caller, such as one
|
|
79
|
+
* returned by the `i18n.parseTime` function, is left as it is.
|
|
80
|
+
*
|
|
78
81
|
* @param {object} timeObject
|
|
79
82
|
* @param {number} step
|
|
80
83
|
* @return {object | undefined}
|
|
81
84
|
*/
|
|
82
85
|
export function validateTime(timeObject, step) {
|
|
83
|
-
if (timeObject) {
|
|
84
|
-
|
|
85
|
-
timeObject.hours = parseInt(timeObject.hours);
|
|
86
|
-
timeObject.minutes = parseInt(timeObject.minutes || 0);
|
|
87
|
-
timeObject.seconds = stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0);
|
|
88
|
-
timeObject.milliseconds = stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0);
|
|
86
|
+
if (!timeObject) {
|
|
87
|
+
return timeObject;
|
|
89
88
|
}
|
|
90
|
-
|
|
89
|
+
|
|
90
|
+
const stepSegment = getStepSegment(step);
|
|
91
|
+
|
|
92
|
+
return {
|
|
93
|
+
...timeObject,
|
|
94
|
+
hours: parseInt(timeObject.hours),
|
|
95
|
+
minutes: parseInt(timeObject.minutes || 0),
|
|
96
|
+
seconds: stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0),
|
|
97
|
+
milliseconds: stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0),
|
|
98
|
+
};
|
|
91
99
|
}
|
|
@@ -38,9 +38,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
38
38
|
* @customElement vaadin-time-picker-item
|
|
39
39
|
* @private
|
|
40
40
|
*/
|
|
41
|
-
|
|
42
|
-
ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
43
|
-
) {
|
|
41
|
+
class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
44
42
|
static get is() {
|
|
45
43
|
return 'vaadin-time-picker-item';
|
|
46
44
|
}
|
|
@@ -61,3 +59,5 @@ export class TimePickerItem extends ComboBoxItemMixin(
|
|
|
61
59
|
}
|
|
62
60
|
|
|
63
61
|
defineCustomElement(TimePickerItem);
|
|
62
|
+
|
|
63
|
+
export { TimePickerItem };
|
|
@@ -129,6 +129,11 @@ export declare class TimePickerMixinClass {
|
|
|
129
129
|
*
|
|
130
130
|
* NOTE: `formatTime` and `parseTime` must be implemented in a
|
|
131
131
|
* compatible manner to ensure the component works properly.
|
|
132
|
+
*
|
|
133
|
+
* NOTE: these functions only apply to the text shown in the input field and
|
|
134
|
+
* in the dropdown. The `value`, `min` and `max` properties always use the
|
|
135
|
+
* ISO 8601 format, and are never passed to `parseTime`, so implementations
|
|
136
|
+
* do not need to accept ISO 8601 input.
|
|
132
137
|
*/
|
|
133
138
|
i18n: TimePickerI18n;
|
|
134
139
|
}
|
|
@@ -95,7 +95,6 @@ export const TimePickerMixin = (superClass) =>
|
|
|
95
95
|
_comboBoxValue: {
|
|
96
96
|
type: String,
|
|
97
97
|
sync: true,
|
|
98
|
-
observer: '__comboBoxValueChanged',
|
|
99
98
|
},
|
|
100
99
|
|
|
101
100
|
/** @private */
|
|
@@ -106,12 +105,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
106
105
|
}
|
|
107
106
|
|
|
108
107
|
static get observers() {
|
|
109
|
-
return [
|
|
110
|
-
'_openedOrItemsChanged(opened, _dropdownItems)',
|
|
111
|
-
'_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
|
|
112
|
-
'__updateAriaAttributes(_dropdownItems, opened, inputElement)',
|
|
113
|
-
'__updateDropdownItems(__effectiveI18n, min, max, step)',
|
|
114
|
-
];
|
|
108
|
+
return ['__updateAriaAttributes(_dropdownItems, opened, inputElement)'];
|
|
115
109
|
}
|
|
116
110
|
|
|
117
111
|
static get defaultI18n() {
|
|
@@ -169,6 +163,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
169
163
|
* NOTE: `formatTime` and `parseTime` must be implemented in a
|
|
170
164
|
* compatible manner to ensure the component works properly.
|
|
171
165
|
*
|
|
166
|
+
* NOTE: these functions only apply to the text shown in the input field and
|
|
167
|
+
* in the dropdown. The `value`, `min` and `max` properties always use the
|
|
168
|
+
* ISO 8601 format, and are never passed to `parseTime`, so implementations
|
|
169
|
+
* do not need to accept ISO 8601 input.
|
|
170
|
+
*
|
|
172
171
|
* @type {!TimePickerI18n}
|
|
173
172
|
*/
|
|
174
173
|
get i18n() {
|
|
@@ -229,9 +228,25 @@ export const TimePickerMixin = (superClass) =>
|
|
|
229
228
|
updated(props) {
|
|
230
229
|
super.updated(props);
|
|
231
230
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
231
|
+
if (['__effectiveI18n', 'min', 'max', 'step'].some((prop) => props.has(prop))) {
|
|
232
|
+
this.__updateDropdownItems();
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
if (props.has('step')) {
|
|
236
|
+
const time = this.__getTimeObject(this.value);
|
|
237
|
+
this.value = formatISOTime(time);
|
|
238
|
+
// Always update the input value, even if the component value hasn't
|
|
239
|
+
// changed, so that the text matches the step interval. For example,
|
|
240
|
+
// if the step is 3600 "10:00:50" should become "10:00".
|
|
241
|
+
this.__updateInputValue(time);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
if (props.has('__effectiveI18n') && this.value) {
|
|
245
|
+
this.__updateInputValue(this.__getTimeObject(this.value));
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
if (props.has('value') || props.has('_dropdownItems')) {
|
|
249
|
+
this._scroller.selectedItem = this._dropdownItems?.find((item) => item.value === this.value);
|
|
235
250
|
}
|
|
236
251
|
}
|
|
237
252
|
|
|
@@ -244,7 +259,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
244
259
|
checkValidity() {
|
|
245
260
|
return !!(
|
|
246
261
|
this.inputElement.checkValidity() &&
|
|
247
|
-
(!this.value || this._timeAllowed(
|
|
262
|
+
(!this.value || this._timeAllowed(parseISOTime(this.value))) &&
|
|
248
263
|
(!this._comboBoxValue || this.__effectiveI18n.parseTime(this._comboBoxValue))
|
|
249
264
|
);
|
|
250
265
|
}
|
|
@@ -258,27 +273,6 @@ export const TimePickerMixin = (superClass) =>
|
|
|
258
273
|
return item ? item.label : '';
|
|
259
274
|
}
|
|
260
275
|
|
|
261
|
-
/** @private */
|
|
262
|
-
_updateScroller(opened, items, focusedIndex, theme) {
|
|
263
|
-
if (opened) {
|
|
264
|
-
this._scroller.style.maxHeight =
|
|
265
|
-
getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
this._scroller.setProperties({
|
|
269
|
-
items: opened ? items : [],
|
|
270
|
-
opened,
|
|
271
|
-
focusedIndex,
|
|
272
|
-
theme,
|
|
273
|
-
});
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
/** @private */
|
|
277
|
-
_openedOrItemsChanged(opened, items) {
|
|
278
|
-
// Close the overlay if there are no items to display.
|
|
279
|
-
this._overlayOpened = opened && !!items?.length;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
276
|
/**
|
|
283
277
|
* Override method from `ComboBoxBaseMixin` to commit value on overlay closing.
|
|
284
278
|
* @protected
|
|
@@ -304,8 +298,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
304
298
|
* @override
|
|
305
299
|
*/
|
|
306
300
|
_onClearAction() {
|
|
307
|
-
this.
|
|
308
|
-
this._inputElementValue = '';
|
|
301
|
+
this.__setValueFromText('');
|
|
309
302
|
|
|
310
303
|
this.__commitValueChange();
|
|
311
304
|
}
|
|
@@ -319,14 +312,12 @@ export const TimePickerMixin = (superClass) =>
|
|
|
319
312
|
if (this._focusedIndex > -1) {
|
|
320
313
|
// Commit value based on focused index
|
|
321
314
|
const focusedItem = this._dropdownItems[this._focusedIndex];
|
|
322
|
-
|
|
323
|
-
this._inputElementValue = itemValue;
|
|
324
|
-
this._comboBoxValue = itemValue;
|
|
315
|
+
this.__setValueFromTime(parseISOTime(focusedItem.value));
|
|
325
316
|
this._focusedIndex = -1;
|
|
326
|
-
} else if (this._inputElementValue
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
this.
|
|
317
|
+
} else if (this._inputElementValue !== this._comboBoxValue) {
|
|
318
|
+
// Committing text that did not change would parse and format it again,
|
|
319
|
+
// and set the value from the result, so skip it.
|
|
320
|
+
this.__setValueFromText(this._inputElementValue || '');
|
|
330
321
|
}
|
|
331
322
|
|
|
332
323
|
this.__commitValueChange();
|
|
@@ -334,19 +325,6 @@ export const TimePickerMixin = (superClass) =>
|
|
|
334
325
|
this._clearSelectionRange();
|
|
335
326
|
}
|
|
336
327
|
|
|
337
|
-
/**
|
|
338
|
-
* Override method from `ComboBoxBaseMixin` to handle loading.
|
|
339
|
-
* @protected
|
|
340
|
-
* @override
|
|
341
|
-
*/
|
|
342
|
-
_closeOrCommit() {
|
|
343
|
-
if (!this.opened) {
|
|
344
|
-
this._commitValue();
|
|
345
|
-
} else {
|
|
346
|
-
this.close();
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
|
|
350
328
|
/**
|
|
351
329
|
* Override method from `ComboBoxBaseMixin` to handle reverting value.
|
|
352
330
|
* @protected
|
|
@@ -365,7 +343,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
365
343
|
_setFocused(focused) {
|
|
366
344
|
super._setFocused(focused);
|
|
367
345
|
|
|
368
|
-
if (!focused) {
|
|
346
|
+
if (!focused && !this._closeOnBlurIsPrevented) {
|
|
369
347
|
// Do not validate when focusout is caused by document
|
|
370
348
|
// losing focus, which happens on browser tab switch.
|
|
371
349
|
if (document.hasFocus()) {
|
|
@@ -406,12 +384,12 @@ export const TimePickerMixin = (superClass) =>
|
|
|
406
384
|
const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
|
|
407
385
|
this.__memoValue = objWithStep;
|
|
408
386
|
|
|
409
|
-
//
|
|
410
|
-
//
|
|
411
|
-
|
|
412
|
-
this.
|
|
413
|
-
|
|
414
|
-
|
|
387
|
+
// Only commit when the formatted text changes, so that a step finer than
|
|
388
|
+
// the formatter can show does not move the value on its own, see #6397.
|
|
389
|
+
const text = this.__effectiveI18n.formatTime(objWithStep) || '';
|
|
390
|
+
if (text !== this._comboBoxValue) {
|
|
391
|
+
this.__setValueFromTime(objWithStep);
|
|
392
|
+
}
|
|
415
393
|
|
|
416
394
|
this.__commitValueChange();
|
|
417
395
|
}
|
|
@@ -461,6 +439,15 @@ export const TimePickerMixin = (superClass) =>
|
|
|
461
439
|
return result;
|
|
462
440
|
}
|
|
463
441
|
|
|
442
|
+
/**
|
|
443
|
+
* Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
|
|
444
|
+
* from an ISO 8601 time, stripped to the resolution defined by the step.
|
|
445
|
+
* @private
|
|
446
|
+
*/
|
|
447
|
+
__getTimeObject(timeString) {
|
|
448
|
+
return validateTime(parseISOTime(timeString), this.step);
|
|
449
|
+
}
|
|
450
|
+
|
|
464
451
|
/**
|
|
465
452
|
* Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
|
|
466
453
|
* @private
|
|
@@ -507,24 +494,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
507
494
|
}
|
|
508
495
|
|
|
509
496
|
/** @private */
|
|
510
|
-
__updateDropdownItems(
|
|
511
|
-
const
|
|
512
|
-
const
|
|
497
|
+
__updateDropdownItems() {
|
|
498
|
+
const minSec = this.__getSec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
|
|
499
|
+
const maxSec = this.__getSec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
|
|
513
500
|
|
|
514
|
-
|
|
515
|
-
const maxSec = this.__getSec(maxTimeObj);
|
|
516
|
-
|
|
517
|
-
this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
|
|
518
|
-
|
|
519
|
-
if (step !== this.__oldStep) {
|
|
520
|
-
this.__oldStep = step;
|
|
521
|
-
const parsedObj = validateTime(parseISOTime(this.value), step);
|
|
522
|
-
this.__updateValue(parsedObj);
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
if (this.value) {
|
|
526
|
-
this._comboBoxValue = effectiveI18n.formatTime(effectiveI18n.parseTime(this.value));
|
|
527
|
-
}
|
|
501
|
+
this._dropdownItems = this.__generateDropdownList(minSec, maxSec, this.step);
|
|
528
502
|
}
|
|
529
503
|
|
|
530
504
|
/** @private */
|
|
@@ -560,7 +534,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
560
534
|
const timeObj = validateTime(this.__addStep(time * 1000, step), step);
|
|
561
535
|
time += step;
|
|
562
536
|
const formatted = this.__effectiveI18n.formatTime(timeObj);
|
|
563
|
-
generatedList.push({ label: formatted, value:
|
|
537
|
+
generatedList.push({ label: formatted, value: formatISOTime(timeObj) });
|
|
564
538
|
}
|
|
565
539
|
|
|
566
540
|
return generatedList;
|
|
@@ -572,8 +546,9 @@ export const TimePickerMixin = (superClass) =>
|
|
|
572
546
|
* @override
|
|
573
547
|
*/
|
|
574
548
|
_valueChanged(value, oldValue) {
|
|
575
|
-
|
|
576
|
-
const
|
|
549
|
+
// Strip value to the step resolution before marking as committed.
|
|
550
|
+
const parsedObj = (this.__memoValue = this.__getTimeObject(value));
|
|
551
|
+
const newValue = formatISOTime(parsedObj);
|
|
577
552
|
|
|
578
553
|
// Mark value set programmatically by the user
|
|
579
554
|
// as committed for the change event detection.
|
|
@@ -588,64 +563,67 @@ export const TimePickerMixin = (superClass) =>
|
|
|
588
563
|
} else if (value !== newValue) {
|
|
589
564
|
// Value can be parsed (e.g. 12 -> 12:00), adjust.
|
|
590
565
|
this.value = newValue;
|
|
591
|
-
} else if (this.
|
|
592
|
-
// User input could not be parsed and was reset
|
|
593
|
-
// to empty string, do not update input value.
|
|
594
|
-
delete this.__keepInvalidInput;
|
|
595
|
-
} else {
|
|
566
|
+
} else if (!this.__keepCommittedValue) {
|
|
596
567
|
this.__updateInputValue(parsedObj);
|
|
597
568
|
}
|
|
598
569
|
|
|
599
570
|
this._toggleHasValue(this._hasValue);
|
|
600
571
|
}
|
|
601
572
|
|
|
602
|
-
/**
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
573
|
+
/**
|
|
574
|
+
* Sets the value without marking it as committed, so that
|
|
575
|
+
* `__commitValueChange()` can still detect the change and
|
|
576
|
+
* fire an event for it.
|
|
577
|
+
*
|
|
578
|
+
* @param {string} value
|
|
579
|
+
* @private
|
|
580
|
+
*/
|
|
581
|
+
__setUncommittedValue(value) {
|
|
582
|
+
this.__keepCommittedValue = true;
|
|
583
|
+
this.value = value;
|
|
584
|
+
this.__keepCommittedValue = false;
|
|
585
|
+
}
|
|
607
586
|
|
|
608
|
-
|
|
609
|
-
|
|
587
|
+
/**
|
|
588
|
+
* Sets the value and the input text from the given time,
|
|
589
|
+
* stripped to the resolution defined by the step.
|
|
590
|
+
*
|
|
591
|
+
* @param {!TimePickerTime} time
|
|
592
|
+
* @private
|
|
593
|
+
*/
|
|
594
|
+
__setValueFromTime(time) {
|
|
595
|
+
const stripped = validateTime(time, this.step);
|
|
596
|
+
this.__setUncommittedValue(formatISOTime(stripped));
|
|
597
|
+
this.__updateInputValue(stripped);
|
|
598
|
+
}
|
|
610
599
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
// after setting the value property to an empty string below.
|
|
623
|
-
if (this.value !== '' && value !== '') {
|
|
624
|
-
this.__keepInvalidInput = true;
|
|
625
|
-
}
|
|
600
|
+
/**
|
|
601
|
+
* Sets the value from the given text. When the text can not be parsed as a
|
|
602
|
+
* time, the value is set to an empty string and the text is left in the
|
|
603
|
+
* input for the user to correct.
|
|
604
|
+
*
|
|
605
|
+
* @param {string} text
|
|
606
|
+
* @private
|
|
607
|
+
*/
|
|
608
|
+
__setValueFromText(text) {
|
|
609
|
+
// Skip parsing an empty field to not call custom `i18n.parseTime` for it.
|
|
610
|
+
const parsed = text ? this.__effectiveI18n.parseTime(text) : undefined;
|
|
626
611
|
|
|
627
|
-
|
|
628
|
-
this.
|
|
629
|
-
|
|
612
|
+
if (parsed) {
|
|
613
|
+
this.__setValueFromTime(parsed);
|
|
614
|
+
return;
|
|
630
615
|
}
|
|
631
|
-
}
|
|
632
|
-
|
|
633
|
-
/** @private */
|
|
634
|
-
__updateValue(obj) {
|
|
635
|
-
const timeString = formatISOTime(validateTime(obj, this.step)) || '';
|
|
636
|
-
this.value = timeString;
|
|
637
616
|
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
this.__updateInputValue(obj);
|
|
617
|
+
this.__setUncommittedValue('');
|
|
618
|
+
this._inputElementValue = text;
|
|
619
|
+
this._comboBoxValue = text;
|
|
642
620
|
}
|
|
643
621
|
|
|
644
622
|
/** @private */
|
|
645
623
|
__updateInputValue(obj) {
|
|
646
|
-
const
|
|
647
|
-
this._inputElementValue =
|
|
648
|
-
this._comboBoxValue =
|
|
624
|
+
const text = this.__effectiveI18n.formatTime(obj) || '';
|
|
625
|
+
this._inputElementValue = text;
|
|
626
|
+
this._comboBoxValue = text;
|
|
649
627
|
}
|
|
650
628
|
|
|
651
629
|
/**
|
|
@@ -656,12 +634,12 @@ export const TimePickerMixin = (superClass) =>
|
|
|
656
634
|
* @protected
|
|
657
635
|
*/
|
|
658
636
|
_timeAllowed(time) {
|
|
659
|
-
const parsedMin =
|
|
660
|
-
const parsedMax =
|
|
637
|
+
const parsedMin = parseISOTime(this.min || MIN_ALLOWED_TIME);
|
|
638
|
+
const parsedMax = parseISOTime(this.max || MAX_ALLOWED_TIME);
|
|
661
639
|
|
|
662
640
|
return (
|
|
663
|
-
(!
|
|
664
|
-
(!
|
|
641
|
+
(!parsedMin || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
|
|
642
|
+
(!parsedMax || this.__getMsec(time) <= this.__getMsec(parsedMax))
|
|
665
643
|
);
|
|
666
644
|
}
|
|
667
645
|
|
|
@@ -21,7 +21,7 @@ import { timePickerOverlayStyles } from './styles/vaadin-time-picker-overlay-bas
|
|
|
21
21
|
* @private
|
|
22
22
|
* @attr {string} theme - The theme variants to apply to the component.
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
class TimePickerOverlay extends ComboBoxOverlayMixin(
|
|
25
25
|
OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
|
|
26
26
|
) {
|
|
27
27
|
static get is() {
|
|
@@ -45,3 +45,5 @@ export class TimePickerOverlay extends ComboBoxOverlayMixin(
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
defineCustomElement(TimePickerOverlay);
|
|
48
|
+
|
|
49
|
+
export { TimePickerOverlay };
|
|
@@ -16,7 +16,7 @@ import { timePickerScrollerStyles } from './styles/vaadin-time-picker-scroller-b
|
|
|
16
16
|
* @extends HTMLElement
|
|
17
17
|
* @private
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
|
|
20
20
|
static get is() {
|
|
21
21
|
return 'vaadin-time-picker-scroller';
|
|
22
22
|
}
|
|
@@ -36,3 +36,5 @@ export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitEl
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
defineCustomElement(TimePickerScroller);
|
|
39
|
+
|
|
40
|
+
export { TimePickerScroller };
|
|
@@ -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,18 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
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.3.0-rc1/#/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
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -238,9 +247,18 @@
|
|
|
238
247
|
],
|
|
239
248
|
"js": {
|
|
240
249
|
"properties": [
|
|
250
|
+
{
|
|
251
|
+
"name": "accessibleDescriptionRef",
|
|
252
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
253
|
+
"value": {
|
|
254
|
+
"type": [
|
|
255
|
+
"string"
|
|
256
|
+
]
|
|
257
|
+
}
|
|
258
|
+
},
|
|
241
259
|
{
|
|
242
260
|
"name": "accessibleName",
|
|
243
|
-
"description": "String used to label the component
|
|
261
|
+
"description": "String used to label the component for screen reader users.",
|
|
244
262
|
"value": {
|
|
245
263
|
"type": [
|
|
246
264
|
"string"
|
|
@@ -249,7 +267,7 @@
|
|
|
249
267
|
},
|
|
250
268
|
{
|
|
251
269
|
"name": "accessibleNameRef",
|
|
252
|
-
"description": "
|
|
270
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
253
271
|
"value": {
|
|
254
272
|
"type": [
|
|
255
273
|
"string"
|
|
@@ -330,7 +348,7 @@
|
|
|
330
348
|
},
|
|
331
349
|
{
|
|
332
350
|
"name": "i18n",
|
|
333
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
351
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
334
352
|
"value": {
|
|
335
353
|
"type": [
|
|
336
354
|
"Object"
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,19 +16,26 @@
|
|
|
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.3.0-rc1/#/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
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -91,7 +98,7 @@
|
|
|
91
98
|
},
|
|
92
99
|
{
|
|
93
100
|
"name": ".i18n",
|
|
94
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
101
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\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.",
|
|
95
102
|
"value": {
|
|
96
103
|
"kind": "expression"
|
|
97
104
|
}
|