@vaadin/date-time-picker 25.2.7 → 25.3.0-alpha10
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 +95 -36
- package/package.json +12 -12
- package/src/vaadin-date-time-picker-mixin.js +2 -7
- package/src/vaadin-date-time-picker.js +1 -0
- package/web-types.json +26 -10
- package/web-types.lit.json +12 -5
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
"description": "A mixin providing common date-time-picker functionality.",
|
|
27
27
|
"name": "DateTimePickerMixin",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleDescriptionRef",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"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.",
|
|
37
|
+
"attribute": "accessible-description-ref",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
29
43
|
{
|
|
30
44
|
"kind": "field",
|
|
31
45
|
"name": "accessibleName",
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
"type": {
|
|
34
48
|
"text": "string"
|
|
35
49
|
},
|
|
36
|
-
"description": "String used to label the component
|
|
50
|
+
"description": "String used to label the component for screen reader users.",
|
|
37
51
|
"attribute": "accessible-name",
|
|
38
52
|
"inheritedFrom": {
|
|
39
53
|
"name": "FieldMixin",
|
|
@@ -47,7 +61,7 @@
|
|
|
47
61
|
"type": {
|
|
48
62
|
"text": "string"
|
|
49
63
|
},
|
|
50
|
-
"description": "
|
|
64
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
51
65
|
"attribute": "accessible-name-ref",
|
|
52
66
|
"inheritedFrom": {
|
|
53
67
|
"name": "FieldMixin",
|
|
@@ -340,12 +354,24 @@
|
|
|
340
354
|
}
|
|
341
355
|
],
|
|
342
356
|
"attributes": [
|
|
357
|
+
{
|
|
358
|
+
"name": "accessible-description-ref",
|
|
359
|
+
"type": {
|
|
360
|
+
"text": "string"
|
|
361
|
+
},
|
|
362
|
+
"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.",
|
|
363
|
+
"fieldName": "accessibleDescriptionRef",
|
|
364
|
+
"inheritedFrom": {
|
|
365
|
+
"name": "FieldMixin",
|
|
366
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
367
|
+
}
|
|
368
|
+
},
|
|
343
369
|
{
|
|
344
370
|
"name": "accessible-name",
|
|
345
371
|
"type": {
|
|
346
372
|
"text": "string"
|
|
347
373
|
},
|
|
348
|
-
"description": "String used to label the component
|
|
374
|
+
"description": "String used to label the component for screen reader users.",
|
|
349
375
|
"fieldName": "accessibleName",
|
|
350
376
|
"inheritedFrom": {
|
|
351
377
|
"name": "FieldMixin",
|
|
@@ -357,7 +383,7 @@
|
|
|
357
383
|
"type": {
|
|
358
384
|
"text": "string"
|
|
359
385
|
},
|
|
360
|
-
"description": "
|
|
386
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
361
387
|
"fieldName": "accessibleNameRef",
|
|
362
388
|
"inheritedFrom": {
|
|
363
389
|
"name": "FieldMixin",
|
|
@@ -602,6 +628,20 @@
|
|
|
602
628
|
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).\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\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | unparsable-change",
|
|
603
629
|
"name": "DateTimePicker",
|
|
604
630
|
"members": [
|
|
631
|
+
{
|
|
632
|
+
"kind": "field",
|
|
633
|
+
"name": "accessibleDescriptionRef",
|
|
634
|
+
"privacy": "public",
|
|
635
|
+
"type": {
|
|
636
|
+
"text": "string"
|
|
637
|
+
},
|
|
638
|
+
"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.",
|
|
639
|
+
"attribute": "accessible-description-ref",
|
|
640
|
+
"inheritedFrom": {
|
|
641
|
+
"name": "FieldMixin",
|
|
642
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
643
|
+
}
|
|
644
|
+
},
|
|
605
645
|
{
|
|
606
646
|
"kind": "field",
|
|
607
647
|
"name": "accessibleName",
|
|
@@ -609,7 +649,7 @@
|
|
|
609
649
|
"type": {
|
|
610
650
|
"text": "string"
|
|
611
651
|
},
|
|
612
|
-
"description": "String used to label the component
|
|
652
|
+
"description": "String used to label the component for screen reader users.",
|
|
613
653
|
"attribute": "accessible-name",
|
|
614
654
|
"inheritedFrom": {
|
|
615
655
|
"name": "FieldMixin",
|
|
@@ -623,7 +663,7 @@
|
|
|
623
663
|
"type": {
|
|
624
664
|
"text": "string"
|
|
625
665
|
},
|
|
626
|
-
"description": "
|
|
666
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
627
667
|
"attribute": "accessible-name-ref",
|
|
628
668
|
"inheritedFrom": {
|
|
629
669
|
"name": "FieldMixin",
|
|
@@ -984,41 +1024,25 @@
|
|
|
984
1024
|
"name": "value-changed"
|
|
985
1025
|
}
|
|
986
1026
|
],
|
|
987
|
-
"
|
|
988
|
-
{
|
|
989
|
-
"name": "DateTimePickerMixin",
|
|
990
|
-
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
991
|
-
},
|
|
992
|
-
{
|
|
993
|
-
"name": "ThemableMixin",
|
|
994
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
995
|
-
},
|
|
996
|
-
{
|
|
997
|
-
"name": "ElementMixin",
|
|
998
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
999
|
-
},
|
|
1027
|
+
"attributes": [
|
|
1000
1028
|
{
|
|
1001
|
-
"name": "
|
|
1002
|
-
"
|
|
1029
|
+
"name": "accessible-description-ref",
|
|
1030
|
+
"type": {
|
|
1031
|
+
"text": "string"
|
|
1032
|
+
},
|
|
1033
|
+
"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.",
|
|
1034
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1035
|
+
"inheritedFrom": {
|
|
1036
|
+
"name": "FieldMixin",
|
|
1037
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1038
|
+
}
|
|
1003
1039
|
},
|
|
1004
|
-
{
|
|
1005
|
-
"name": "LumoInjectionMixin",
|
|
1006
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1007
|
-
}
|
|
1008
|
-
],
|
|
1009
|
-
"superclass": {
|
|
1010
|
-
"name": "LitElement",
|
|
1011
|
-
"package": "lit"
|
|
1012
|
-
},
|
|
1013
|
-
"tagName": "vaadin-date-time-picker",
|
|
1014
|
-
"customElement": true,
|
|
1015
|
-
"attributes": [
|
|
1016
1040
|
{
|
|
1017
1041
|
"name": "accessible-name",
|
|
1018
1042
|
"type": {
|
|
1019
1043
|
"text": "string"
|
|
1020
1044
|
},
|
|
1021
|
-
"description": "String used to label the component
|
|
1045
|
+
"description": "String used to label the component for screen reader users.",
|
|
1022
1046
|
"fieldName": "accessibleName",
|
|
1023
1047
|
"inheritedFrom": {
|
|
1024
1048
|
"name": "FieldMixin",
|
|
@@ -1030,7 +1054,7 @@
|
|
|
1030
1054
|
"type": {
|
|
1031
1055
|
"text": "string"
|
|
1032
1056
|
},
|
|
1033
|
-
"description": "
|
|
1057
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1034
1058
|
"fieldName": "accessibleNameRef",
|
|
1035
1059
|
"inheritedFrom": {
|
|
1036
1060
|
"name": "FieldMixin",
|
|
@@ -1253,6 +1277,13 @@
|
|
|
1253
1277
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1254
1278
|
}
|
|
1255
1279
|
},
|
|
1280
|
+
{
|
|
1281
|
+
"type": {
|
|
1282
|
+
"text": "string"
|
|
1283
|
+
},
|
|
1284
|
+
"description": "The theme variants to apply to the component.",
|
|
1285
|
+
"name": "theme"
|
|
1286
|
+
},
|
|
1256
1287
|
{
|
|
1257
1288
|
"name": "time-placeholder",
|
|
1258
1289
|
"type": {
|
|
@@ -1277,7 +1308,35 @@
|
|
|
1277
1308
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1278
1309
|
}
|
|
1279
1310
|
}
|
|
1280
|
-
]
|
|
1311
|
+
],
|
|
1312
|
+
"mixins": [
|
|
1313
|
+
{
|
|
1314
|
+
"name": "DateTimePickerMixin",
|
|
1315
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1316
|
+
},
|
|
1317
|
+
{
|
|
1318
|
+
"name": "ThemableMixin",
|
|
1319
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1320
|
+
},
|
|
1321
|
+
{
|
|
1322
|
+
"name": "ElementMixin",
|
|
1323
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1324
|
+
},
|
|
1325
|
+
{
|
|
1326
|
+
"name": "PolylitMixin",
|
|
1327
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1328
|
+
},
|
|
1329
|
+
{
|
|
1330
|
+
"name": "LumoInjectionMixin",
|
|
1331
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1332
|
+
}
|
|
1333
|
+
],
|
|
1334
|
+
"superclass": {
|
|
1335
|
+
"name": "LitElement",
|
|
1336
|
+
"package": "lit"
|
|
1337
|
+
},
|
|
1338
|
+
"tagName": "vaadin-date-time-picker",
|
|
1339
|
+
"customElement": true
|
|
1281
1340
|
}
|
|
1282
1341
|
],
|
|
1283
1342
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "
|
|
39
|
-
"@vaadin/component-base": "
|
|
40
|
-
"@vaadin/date-picker": "
|
|
41
|
-
"@vaadin/field-base": "
|
|
42
|
-
"@vaadin/time-picker": "
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha10",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-alpha10",
|
|
40
|
+
"@vaadin/date-picker": "25.3.0-alpha10",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-alpha10",
|
|
42
|
+
"@vaadin/time-picker": "25.3.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "
|
|
48
|
-
"@vaadin/chai-plugins": "
|
|
49
|
-
"@vaadin/test-runner-commands": "
|
|
47
|
+
"@vaadin/aura": "25.3.0-alpha10",
|
|
48
|
+
"@vaadin/chai-plugins": "25.3.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha10",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
|
|
52
52
|
"sinon": "^22.0.0"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
|
|
60
60
|
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
7
7
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
8
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
8
9
|
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
9
10
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
10
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
@@ -969,13 +970,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
969
970
|
return;
|
|
970
971
|
}
|
|
971
972
|
|
|
972
|
-
[datePicker, timePicker].forEach((picker) =>
|
|
973
|
-
if (theme) {
|
|
974
|
-
picker.setAttribute('theme', theme);
|
|
975
|
-
} else {
|
|
976
|
-
picker.removeAttribute('theme');
|
|
977
|
-
}
|
|
978
|
-
});
|
|
973
|
+
[datePicker, timePicker].forEach((picker) => setOrRemoveAttribute(picker, 'theme', theme));
|
|
979
974
|
}
|
|
980
975
|
|
|
981
976
|
/** @private */
|
|
@@ -112,6 +112,7 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
|
112
112
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
113
113
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
114
114
|
*
|
|
115
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
115
116
|
* @customElement vaadin-date-time-picker
|
|
116
117
|
* @extends HTMLElement
|
|
117
118
|
*/
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-time-picker",
|
|
11
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
11
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker).\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\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | 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"
|
|
@@ -186,9 +195,7 @@
|
|
|
186
195
|
"description": "The theme variants to apply to the component.",
|
|
187
196
|
"value": {
|
|
188
197
|
"type": [
|
|
189
|
-
"string"
|
|
190
|
-
"null",
|
|
191
|
-
"undefined"
|
|
198
|
+
"string"
|
|
192
199
|
]
|
|
193
200
|
}
|
|
194
201
|
},
|
|
@@ -213,9 +220,18 @@
|
|
|
213
220
|
],
|
|
214
221
|
"js": {
|
|
215
222
|
"properties": [
|
|
223
|
+
{
|
|
224
|
+
"name": "accessibleDescriptionRef",
|
|
225
|
+
"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.",
|
|
226
|
+
"value": {
|
|
227
|
+
"type": [
|
|
228
|
+
"string"
|
|
229
|
+
]
|
|
230
|
+
}
|
|
231
|
+
},
|
|
216
232
|
{
|
|
217
233
|
"name": "accessibleName",
|
|
218
|
-
"description": "String used to label the component
|
|
234
|
+
"description": "String used to label the component for screen reader users.",
|
|
219
235
|
"value": {
|
|
220
236
|
"type": [
|
|
221
237
|
"string"
|
|
@@ -224,7 +240,7 @@
|
|
|
224
240
|
},
|
|
225
241
|
{
|
|
226
242
|
"name": "accessibleNameRef",
|
|
227
|
-
"description": "
|
|
243
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
228
244
|
"value": {
|
|
229
245
|
"type": [
|
|
230
246
|
"string"
|
|
@@ -287,7 +303,7 @@
|
|
|
287
303
|
},
|
|
288
304
|
{
|
|
289
305
|
"name": "i18n",
|
|
290
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
306
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker) are supported.",
|
|
291
307
|
"value": {
|
|
292
308
|
"type": [
|
|
293
309
|
"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/date-time-picker",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
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-date-time-picker",
|
|
19
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
19
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\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-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-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-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker).\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\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | 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
|
}
|
|
@@ -77,7 +84,7 @@
|
|
|
77
84
|
},
|
|
78
85
|
{
|
|
79
86
|
"name": ".i18n",
|
|
80
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.
|
|
87
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-time-picker) are supported.",
|
|
81
88
|
"value": {
|
|
82
89
|
"kind": "expression"
|
|
83
90
|
}
|