@vaadin/time-picker 25.3.0-alpha8 → 25.3.0-beta1
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 +107 -92
- 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-beta1",
|
|
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-beta1",
|
|
39
|
+
"@vaadin/combo-box": "25.3.0-beta1",
|
|
40
|
+
"@vaadin/component-base": "25.3.0-beta1",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-beta1",
|
|
42
|
+
"@vaadin/input-container": "25.3.0-beta1",
|
|
43
|
+
"@vaadin/item": "25.3.0-beta1",
|
|
44
|
+
"@vaadin/overlay": "25.3.0-beta1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
|
|
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-beta1",
|
|
50
|
+
"@vaadin/chai-plugins": "25.3.0-beta1",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.3.0-beta1",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
|
|
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": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
|
|
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 */
|
|
@@ -108,9 +107,8 @@ export const TimePickerMixin = (superClass) =>
|
|
|
108
107
|
static get observers() {
|
|
109
108
|
return [
|
|
110
109
|
'_openedOrItemsChanged(opened, _dropdownItems)',
|
|
111
|
-
'_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
|
|
110
|
+
'_updateScroller(opened, _dropdownItems, _focusedIndex, _theme, value)',
|
|
112
111
|
'__updateAriaAttributes(_dropdownItems, opened, inputElement)',
|
|
113
|
-
'__updateDropdownItems(__effectiveI18n, min, max, step)',
|
|
114
112
|
];
|
|
115
113
|
}
|
|
116
114
|
|
|
@@ -169,6 +167,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
169
167
|
* NOTE: `formatTime` and `parseTime` must be implemented in a
|
|
170
168
|
* compatible manner to ensure the component works properly.
|
|
171
169
|
*
|
|
170
|
+
* NOTE: these functions only apply to the text shown in the input field and
|
|
171
|
+
* in the dropdown. The `value`, `min` and `max` properties always use the
|
|
172
|
+
* ISO 8601 format, and are never passed to `parseTime`, so implementations
|
|
173
|
+
* do not need to accept ISO 8601 input.
|
|
174
|
+
*
|
|
172
175
|
* @type {!TimePickerI18n}
|
|
173
176
|
*/
|
|
174
177
|
get i18n() {
|
|
@@ -229,9 +232,21 @@ export const TimePickerMixin = (superClass) =>
|
|
|
229
232
|
updated(props) {
|
|
230
233
|
super.updated(props);
|
|
231
234
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
+
if (['__effectiveI18n', 'min', 'max', 'step'].some((prop) => props.has(prop))) {
|
|
236
|
+
this.__updateDropdownItems();
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
if (props.has('step')) {
|
|
240
|
+
const time = this.__getTimeObject(this.value);
|
|
241
|
+
this.value = formatISOTime(time);
|
|
242
|
+
// Always update the input value, even if the component value hasn't
|
|
243
|
+
// changed, so that the text matches the step interval. For example,
|
|
244
|
+
// if the step is 3600 "10:00:50" should become "10:00".
|
|
245
|
+
this.__updateInputValue(time);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
if (props.has('__effectiveI18n') && this.value) {
|
|
249
|
+
this.__updateInputValue(this.__getTimeObject(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
|
}
|
|
@@ -259,17 +274,20 @@ export const TimePickerMixin = (superClass) =>
|
|
|
259
274
|
}
|
|
260
275
|
|
|
261
276
|
/** @private */
|
|
262
|
-
_updateScroller(opened, items, focusedIndex, theme) {
|
|
277
|
+
_updateScroller(opened, items, focusedIndex, theme, value) {
|
|
263
278
|
if (opened) {
|
|
264
279
|
this._scroller.style.maxHeight =
|
|
265
280
|
getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
|
|
266
281
|
}
|
|
267
282
|
|
|
283
|
+
const isClosing = this.hasAttribute('closing');
|
|
284
|
+
|
|
268
285
|
this._scroller.setProperties({
|
|
269
|
-
items: opened ? items : [],
|
|
286
|
+
items: opened || isClosing ? items : [],
|
|
270
287
|
opened,
|
|
271
288
|
focusedIndex,
|
|
272
289
|
theme,
|
|
290
|
+
selectedItem: items?.find((item) => item.value === value),
|
|
273
291
|
});
|
|
274
292
|
}
|
|
275
293
|
|
|
@@ -304,8 +322,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
304
322
|
* @override
|
|
305
323
|
*/
|
|
306
324
|
_onClearAction() {
|
|
307
|
-
this.
|
|
308
|
-
this._inputElementValue = '';
|
|
325
|
+
this.__setValueFromText('');
|
|
309
326
|
|
|
310
327
|
this.__commitValueChange();
|
|
311
328
|
}
|
|
@@ -319,14 +336,12 @@ export const TimePickerMixin = (superClass) =>
|
|
|
319
336
|
if (this._focusedIndex > -1) {
|
|
320
337
|
// Commit value based on focused index
|
|
321
338
|
const focusedItem = this._dropdownItems[this._focusedIndex];
|
|
322
|
-
|
|
323
|
-
this._inputElementValue = itemValue;
|
|
324
|
-
this._comboBoxValue = itemValue;
|
|
339
|
+
this.__setValueFromTime(parseISOTime(focusedItem.value));
|
|
325
340
|
this._focusedIndex = -1;
|
|
326
|
-
} else if (this._inputElementValue
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
this.
|
|
341
|
+
} else if (this._inputElementValue !== this._comboBoxValue) {
|
|
342
|
+
// Committing text that did not change would parse and format it again,
|
|
343
|
+
// and set the value from the result, so skip it.
|
|
344
|
+
this.__setValueFromText(this._inputElementValue || '');
|
|
330
345
|
}
|
|
331
346
|
|
|
332
347
|
this.__commitValueChange();
|
|
@@ -365,7 +380,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
365
380
|
_setFocused(focused) {
|
|
366
381
|
super._setFocused(focused);
|
|
367
382
|
|
|
368
|
-
if (!focused) {
|
|
383
|
+
if (!focused && !this._closeOnBlurIsPrevented) {
|
|
369
384
|
// Do not validate when focusout is caused by document
|
|
370
385
|
// losing focus, which happens on browser tab switch.
|
|
371
386
|
if (document.hasFocus()) {
|
|
@@ -406,12 +421,12 @@ export const TimePickerMixin = (superClass) =>
|
|
|
406
421
|
const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
|
|
407
422
|
this.__memoValue = objWithStep;
|
|
408
423
|
|
|
409
|
-
//
|
|
410
|
-
//
|
|
411
|
-
|
|
412
|
-
this.
|
|
413
|
-
|
|
414
|
-
|
|
424
|
+
// Only commit when the formatted text changes, so that a step finer than
|
|
425
|
+
// the formatter can show does not move the value on its own, see #6397.
|
|
426
|
+
const text = this.__effectiveI18n.formatTime(objWithStep) || '';
|
|
427
|
+
if (text !== this._comboBoxValue) {
|
|
428
|
+
this.__setValueFromTime(objWithStep);
|
|
429
|
+
}
|
|
415
430
|
|
|
416
431
|
this.__commitValueChange();
|
|
417
432
|
}
|
|
@@ -461,6 +476,15 @@ export const TimePickerMixin = (superClass) =>
|
|
|
461
476
|
return result;
|
|
462
477
|
}
|
|
463
478
|
|
|
479
|
+
/**
|
|
480
|
+
* Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
|
|
481
|
+
* from an ISO 8601 time, stripped to the resolution defined by the step.
|
|
482
|
+
* @private
|
|
483
|
+
*/
|
|
484
|
+
__getTimeObject(timeString) {
|
|
485
|
+
return validateTime(parseISOTime(timeString), this.step);
|
|
486
|
+
}
|
|
487
|
+
|
|
464
488
|
/**
|
|
465
489
|
* Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
|
|
466
490
|
* @private
|
|
@@ -507,24 +531,11 @@ export const TimePickerMixin = (superClass) =>
|
|
|
507
531
|
}
|
|
508
532
|
|
|
509
533
|
/** @private */
|
|
510
|
-
__updateDropdownItems(
|
|
511
|
-
const
|
|
512
|
-
const
|
|
534
|
+
__updateDropdownItems() {
|
|
535
|
+
const minSec = this.__getSec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
|
|
536
|
+
const maxSec = this.__getSec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
|
|
513
537
|
|
|
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
|
-
}
|
|
538
|
+
this._dropdownItems = this.__generateDropdownList(minSec, maxSec, this.step);
|
|
528
539
|
}
|
|
529
540
|
|
|
530
541
|
/** @private */
|
|
@@ -560,7 +571,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
560
571
|
const timeObj = validateTime(this.__addStep(time * 1000, step), step);
|
|
561
572
|
time += step;
|
|
562
573
|
const formatted = this.__effectiveI18n.formatTime(timeObj);
|
|
563
|
-
generatedList.push({ label: formatted, value:
|
|
574
|
+
generatedList.push({ label: formatted, value: formatISOTime(timeObj) });
|
|
564
575
|
}
|
|
565
576
|
|
|
566
577
|
return generatedList;
|
|
@@ -572,8 +583,9 @@ export const TimePickerMixin = (superClass) =>
|
|
|
572
583
|
* @override
|
|
573
584
|
*/
|
|
574
585
|
_valueChanged(value, oldValue) {
|
|
575
|
-
|
|
576
|
-
const
|
|
586
|
+
// Strip value to the step resolution before marking as committed.
|
|
587
|
+
const parsedObj = (this.__memoValue = this.__getTimeObject(value));
|
|
588
|
+
const newValue = formatISOTime(parsedObj);
|
|
577
589
|
|
|
578
590
|
// Mark value set programmatically by the user
|
|
579
591
|
// as committed for the change event detection.
|
|
@@ -588,64 +600,67 @@ export const TimePickerMixin = (superClass) =>
|
|
|
588
600
|
} else if (value !== newValue) {
|
|
589
601
|
// Value can be parsed (e.g. 12 -> 12:00), adjust.
|
|
590
602
|
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 {
|
|
603
|
+
} else if (!this.__keepCommittedValue) {
|
|
596
604
|
this.__updateInputValue(parsedObj);
|
|
597
605
|
}
|
|
598
606
|
|
|
599
607
|
this._toggleHasValue(this._hasValue);
|
|
600
608
|
}
|
|
601
609
|
|
|
602
|
-
/**
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
610
|
+
/**
|
|
611
|
+
* Sets the value without marking it as committed, so that
|
|
612
|
+
* `__commitValueChange()` can still detect the change and
|
|
613
|
+
* fire an event for it.
|
|
614
|
+
*
|
|
615
|
+
* @param {string} value
|
|
616
|
+
* @private
|
|
617
|
+
*/
|
|
618
|
+
__setUncommittedValue(value) {
|
|
619
|
+
this.__keepCommittedValue = true;
|
|
620
|
+
this.value = value;
|
|
621
|
+
this.__keepCommittedValue = false;
|
|
622
|
+
}
|
|
607
623
|
|
|
608
|
-
|
|
609
|
-
|
|
624
|
+
/**
|
|
625
|
+
* Sets the value and the input text from the given time,
|
|
626
|
+
* stripped to the resolution defined by the step.
|
|
627
|
+
*
|
|
628
|
+
* @param {!TimePickerTime} time
|
|
629
|
+
* @private
|
|
630
|
+
*/
|
|
631
|
+
__setValueFromTime(time) {
|
|
632
|
+
const stripped = validateTime(time, this.step);
|
|
633
|
+
this.__setUncommittedValue(formatISOTime(stripped));
|
|
634
|
+
this.__updateInputValue(stripped);
|
|
635
|
+
}
|
|
610
636
|
|
|
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
|
-
}
|
|
637
|
+
/**
|
|
638
|
+
* Sets the value from the given text. When the text can not be parsed as a
|
|
639
|
+
* time, the value is set to an empty string and the text is left in the
|
|
640
|
+
* input for the user to correct.
|
|
641
|
+
*
|
|
642
|
+
* @param {string} text
|
|
643
|
+
* @private
|
|
644
|
+
*/
|
|
645
|
+
__setValueFromText(text) {
|
|
646
|
+
// Skip parsing an empty field to not call custom `i18n.parseTime` for it.
|
|
647
|
+
const parsed = text ? this.__effectiveI18n.parseTime(text) : undefined;
|
|
626
648
|
|
|
627
|
-
|
|
628
|
-
this.
|
|
629
|
-
|
|
649
|
+
if (parsed) {
|
|
650
|
+
this.__setValueFromTime(parsed);
|
|
651
|
+
return;
|
|
630
652
|
}
|
|
631
|
-
}
|
|
632
|
-
|
|
633
|
-
/** @private */
|
|
634
|
-
__updateValue(obj) {
|
|
635
|
-
const timeString = formatISOTime(validateTime(obj, this.step)) || '';
|
|
636
|
-
this.value = timeString;
|
|
637
653
|
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
this.__updateInputValue(obj);
|
|
654
|
+
this.__setUncommittedValue('');
|
|
655
|
+
this._inputElementValue = text;
|
|
656
|
+
this._comboBoxValue = text;
|
|
642
657
|
}
|
|
643
658
|
|
|
644
659
|
/** @private */
|
|
645
660
|
__updateInputValue(obj) {
|
|
646
|
-
const
|
|
647
|
-
this._inputElementValue =
|
|
648
|
-
this._comboBoxValue =
|
|
661
|
+
const text = this.__effectiveI18n.formatTime(obj) || '';
|
|
662
|
+
this._inputElementValue = text;
|
|
663
|
+
this._comboBoxValue = text;
|
|
649
664
|
}
|
|
650
665
|
|
|
651
666
|
/**
|
|
@@ -656,12 +671,12 @@ export const TimePickerMixin = (superClass) =>
|
|
|
656
671
|
* @protected
|
|
657
672
|
*/
|
|
658
673
|
_timeAllowed(time) {
|
|
659
|
-
const parsedMin =
|
|
660
|
-
const parsedMax =
|
|
674
|
+
const parsedMin = parseISOTime(this.min || MIN_ALLOWED_TIME);
|
|
675
|
+
const parsedMax = parseISOTime(this.max || MAX_ALLOWED_TIME);
|
|
661
676
|
|
|
662
677
|
return (
|
|
663
|
-
(!
|
|
664
|
-
(!
|
|
678
|
+
(!parsedMin || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
|
|
679
|
+
(!parsedMax || this.__getMsec(time) <= this.__getMsec(parsedMax))
|
|
665
680
|
);
|
|
666
681
|
}
|
|
667
682
|
|
|
@@ -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-beta1",
|
|
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-beta1/#/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-beta1",
|
|
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-beta1/#/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
|
}
|