@vaadin/date-picker 23.3.19 → 23.3.21
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/package.json +10 -10
- package/web-types.json +205 -21
- package/web-types.lit.json +79 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-picker",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.21",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.2.0",
|
|
39
|
-
"@vaadin/button": "~23.3.
|
|
40
|
-
"@vaadin/component-base": "~23.3.
|
|
41
|
-
"@vaadin/field-base": "~23.3.
|
|
42
|
-
"@vaadin/input-container": "~23.3.
|
|
43
|
-
"@vaadin/overlay": "~23.3.
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "~23.3.
|
|
45
|
-
"@vaadin/vaadin-material-styles": "~23.3.
|
|
46
|
-
"@vaadin/vaadin-themable-mixin": "~23.3.
|
|
39
|
+
"@vaadin/button": "~23.3.21",
|
|
40
|
+
"@vaadin/component-base": "~23.3.21",
|
|
41
|
+
"@vaadin/field-base": "~23.3.21",
|
|
42
|
+
"@vaadin/input-container": "~23.3.21",
|
|
43
|
+
"@vaadin/overlay": "~23.3.21",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.21",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "~23.3.21",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.21"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "5caee824b60295eb1e03b736880ed73f62a8988c"
|
|
58
58
|
}
|
package/web-types.json
CHANGED
|
@@ -1,15 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-picker",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "24.2.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-picker-light",
|
|
11
|
-
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\
|
|
11
|
+
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "autofocus",
|
|
26
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
13
35
|
{
|
|
14
36
|
"name": "value",
|
|
15
37
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -19,6 +41,39 @@
|
|
|
19
41
|
]
|
|
20
42
|
}
|
|
21
43
|
},
|
|
44
|
+
{
|
|
45
|
+
"name": "invalid",
|
|
46
|
+
"description": "Set to true when the field is invalid.",
|
|
47
|
+
"value": {
|
|
48
|
+
"type": [
|
|
49
|
+
"boolean",
|
|
50
|
+
"null",
|
|
51
|
+
"undefined"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "required",
|
|
57
|
+
"description": "Specifies that the user must fill in a value.",
|
|
58
|
+
"value": {
|
|
59
|
+
"type": [
|
|
60
|
+
"boolean",
|
|
61
|
+
"null",
|
|
62
|
+
"undefined"
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "overlay-class",
|
|
68
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
69
|
+
"value": {
|
|
70
|
+
"type": [
|
|
71
|
+
"string",
|
|
72
|
+
"null",
|
|
73
|
+
"undefined"
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
},
|
|
22
77
|
{
|
|
23
78
|
"name": "initial-position",
|
|
24
79
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -106,6 +161,28 @@
|
|
|
106
161
|
],
|
|
107
162
|
"js": {
|
|
108
163
|
"properties": [
|
|
164
|
+
{
|
|
165
|
+
"name": "disabled",
|
|
166
|
+
"description": "If true, the user cannot interact with this element.",
|
|
167
|
+
"value": {
|
|
168
|
+
"type": [
|
|
169
|
+
"boolean",
|
|
170
|
+
"null",
|
|
171
|
+
"undefined"
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"name": "autofocus",
|
|
177
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
178
|
+
"value": {
|
|
179
|
+
"type": [
|
|
180
|
+
"boolean",
|
|
181
|
+
"null",
|
|
182
|
+
"undefined"
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
},
|
|
109
186
|
{
|
|
110
187
|
"name": "value",
|
|
111
188
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -115,6 +192,39 @@
|
|
|
115
192
|
]
|
|
116
193
|
}
|
|
117
194
|
},
|
|
195
|
+
{
|
|
196
|
+
"name": "invalid",
|
|
197
|
+
"description": "Set to true when the field is invalid.",
|
|
198
|
+
"value": {
|
|
199
|
+
"type": [
|
|
200
|
+
"boolean",
|
|
201
|
+
"null",
|
|
202
|
+
"undefined"
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "required",
|
|
208
|
+
"description": "Specifies that the user must fill in a value.",
|
|
209
|
+
"value": {
|
|
210
|
+
"type": [
|
|
211
|
+
"boolean",
|
|
212
|
+
"null",
|
|
213
|
+
"undefined"
|
|
214
|
+
]
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "overlayClass",
|
|
219
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
220
|
+
"value": {
|
|
221
|
+
"type": [
|
|
222
|
+
"string",
|
|
223
|
+
"null",
|
|
224
|
+
"undefined"
|
|
225
|
+
]
|
|
226
|
+
}
|
|
227
|
+
},
|
|
118
228
|
{
|
|
119
229
|
"name": "initialPosition",
|
|
120
230
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -161,7 +271,7 @@
|
|
|
161
271
|
},
|
|
162
272
|
{
|
|
163
273
|
"name": "i18n",
|
|
164
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n //
|
|
274
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
165
275
|
"value": {
|
|
166
276
|
"type": [
|
|
167
277
|
"DatePickerI18n"
|
|
@@ -199,6 +309,10 @@
|
|
|
199
309
|
}
|
|
200
310
|
],
|
|
201
311
|
"events": [
|
|
312
|
+
{
|
|
313
|
+
"name": "validated",
|
|
314
|
+
"description": "Fired whenever the field is validated."
|
|
315
|
+
},
|
|
202
316
|
{
|
|
203
317
|
"name": "change",
|
|
204
318
|
"description": "Fired when the user commits a value change."
|
|
@@ -210,13 +324,17 @@
|
|
|
210
324
|
{
|
|
211
325
|
"name": "value-changed",
|
|
212
326
|
"description": "Fired when `value` property value changes."
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"name": "invalid-changed",
|
|
330
|
+
"description": "Fired when the `invalid` property changes."
|
|
213
331
|
}
|
|
214
332
|
]
|
|
215
333
|
}
|
|
216
334
|
},
|
|
217
335
|
{
|
|
218
336
|
"name": "vaadin-date-picker",
|
|
219
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
337
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
220
338
|
"attributes": [
|
|
221
339
|
{
|
|
222
340
|
"name": "disabled",
|
|
@@ -295,6 +413,28 @@
|
|
|
295
413
|
]
|
|
296
414
|
}
|
|
297
415
|
},
|
|
416
|
+
{
|
|
417
|
+
"name": "accessible-name",
|
|
418
|
+
"description": "String used to label the component to screen reader users.",
|
|
419
|
+
"value": {
|
|
420
|
+
"type": [
|
|
421
|
+
"string",
|
|
422
|
+
"null",
|
|
423
|
+
"undefined"
|
|
424
|
+
]
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"name": "accessible-name-ref",
|
|
429
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
430
|
+
"value": {
|
|
431
|
+
"type": [
|
|
432
|
+
"string",
|
|
433
|
+
"null",
|
|
434
|
+
"undefined"
|
|
435
|
+
]
|
|
436
|
+
}
|
|
437
|
+
},
|
|
298
438
|
{
|
|
299
439
|
"name": "value",
|
|
300
440
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -305,30 +445,30 @@
|
|
|
305
445
|
}
|
|
306
446
|
},
|
|
307
447
|
{
|
|
308
|
-
"name": "
|
|
309
|
-
"description": "
|
|
448
|
+
"name": "clear-button-visible",
|
|
449
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
310
450
|
"value": {
|
|
311
451
|
"type": [
|
|
312
|
-
"
|
|
452
|
+
"boolean",
|
|
313
453
|
"null",
|
|
314
454
|
"undefined"
|
|
315
455
|
]
|
|
316
456
|
}
|
|
317
457
|
},
|
|
318
458
|
{
|
|
319
|
-
"name": "
|
|
320
|
-
"description": "
|
|
459
|
+
"name": "allowed-char-pattern",
|
|
460
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
321
461
|
"value": {
|
|
322
462
|
"type": [
|
|
323
|
-
"
|
|
463
|
+
"string",
|
|
324
464
|
"null",
|
|
325
465
|
"undefined"
|
|
326
466
|
]
|
|
327
467
|
}
|
|
328
468
|
},
|
|
329
469
|
{
|
|
330
|
-
"name": "
|
|
331
|
-
"description": "
|
|
470
|
+
"name": "autoselect",
|
|
471
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
332
472
|
"value": {
|
|
333
473
|
"type": [
|
|
334
474
|
"boolean",
|
|
@@ -381,6 +521,17 @@
|
|
|
381
521
|
]
|
|
382
522
|
}
|
|
383
523
|
},
|
|
524
|
+
{
|
|
525
|
+
"name": "overlay-class",
|
|
526
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
527
|
+
"value": {
|
|
528
|
+
"type": [
|
|
529
|
+
"string",
|
|
530
|
+
"null",
|
|
531
|
+
"undefined"
|
|
532
|
+
]
|
|
533
|
+
}
|
|
534
|
+
},
|
|
384
535
|
{
|
|
385
536
|
"name": "initial-position",
|
|
386
537
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -536,6 +687,28 @@
|
|
|
536
687
|
]
|
|
537
688
|
}
|
|
538
689
|
},
|
|
690
|
+
{
|
|
691
|
+
"name": "accessibleName",
|
|
692
|
+
"description": "String used to label the component to screen reader users.",
|
|
693
|
+
"value": {
|
|
694
|
+
"type": [
|
|
695
|
+
"string",
|
|
696
|
+
"null",
|
|
697
|
+
"undefined"
|
|
698
|
+
]
|
|
699
|
+
}
|
|
700
|
+
},
|
|
701
|
+
{
|
|
702
|
+
"name": "accessibleNameRef",
|
|
703
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
704
|
+
"value": {
|
|
705
|
+
"type": [
|
|
706
|
+
"string",
|
|
707
|
+
"null",
|
|
708
|
+
"undefined"
|
|
709
|
+
]
|
|
710
|
+
}
|
|
711
|
+
},
|
|
539
712
|
{
|
|
540
713
|
"name": "value",
|
|
541
714
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -546,30 +719,30 @@
|
|
|
546
719
|
}
|
|
547
720
|
},
|
|
548
721
|
{
|
|
549
|
-
"name": "
|
|
550
|
-
"description": "
|
|
722
|
+
"name": "clearButtonVisible",
|
|
723
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
551
724
|
"value": {
|
|
552
725
|
"type": [
|
|
553
|
-
"
|
|
726
|
+
"boolean",
|
|
554
727
|
"null",
|
|
555
728
|
"undefined"
|
|
556
729
|
]
|
|
557
730
|
}
|
|
558
731
|
},
|
|
559
732
|
{
|
|
560
|
-
"name": "
|
|
561
|
-
"description": "
|
|
733
|
+
"name": "allowedCharPattern",
|
|
734
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
562
735
|
"value": {
|
|
563
736
|
"type": [
|
|
564
|
-
"
|
|
737
|
+
"string",
|
|
565
738
|
"null",
|
|
566
739
|
"undefined"
|
|
567
740
|
]
|
|
568
741
|
}
|
|
569
742
|
},
|
|
570
743
|
{
|
|
571
|
-
"name": "
|
|
572
|
-
"description": "
|
|
744
|
+
"name": "autoselect",
|
|
745
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
573
746
|
"value": {
|
|
574
747
|
"type": [
|
|
575
748
|
"boolean",
|
|
@@ -622,6 +795,17 @@
|
|
|
622
795
|
]
|
|
623
796
|
}
|
|
624
797
|
},
|
|
798
|
+
{
|
|
799
|
+
"name": "overlayClass",
|
|
800
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
801
|
+
"value": {
|
|
802
|
+
"type": [
|
|
803
|
+
"string",
|
|
804
|
+
"null",
|
|
805
|
+
"undefined"
|
|
806
|
+
]
|
|
807
|
+
}
|
|
808
|
+
},
|
|
625
809
|
{
|
|
626
810
|
"name": "initialPosition",
|
|
627
811
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -668,7 +852,7 @@
|
|
|
668
852
|
},
|
|
669
853
|
{
|
|
670
854
|
"name": "i18n",
|
|
671
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n //
|
|
855
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
672
856
|
"value": {
|
|
673
857
|
"type": [
|
|
674
858
|
"DatePickerI18n"
|
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-picker",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "24.2.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,9 +16,37 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-date-picker-light",
|
|
19
|
-
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\
|
|
19
|
+
"description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?autofocus",
|
|
31
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?invalid",
|
|
38
|
+
"description": "Set to true when the field is invalid.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?required",
|
|
45
|
+
"description": "Specifies that the user must fill in a value.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
22
50
|
{
|
|
23
51
|
"name": "?opened",
|
|
24
52
|
"description": "Set true to open the date selector overlay.",
|
|
@@ -47,6 +75,13 @@
|
|
|
47
75
|
"kind": "expression"
|
|
48
76
|
}
|
|
49
77
|
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".overlayClass",
|
|
80
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
50
85
|
{
|
|
51
86
|
"name": ".initialPosition",
|
|
52
87
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -56,7 +91,7 @@
|
|
|
56
91
|
},
|
|
57
92
|
{
|
|
58
93
|
"name": ".i18n",
|
|
59
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n //
|
|
94
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
60
95
|
"value": {
|
|
61
96
|
"kind": "expression"
|
|
62
97
|
}
|
|
@@ -82,6 +117,13 @@
|
|
|
82
117
|
"kind": "expression"
|
|
83
118
|
}
|
|
84
119
|
},
|
|
120
|
+
{
|
|
121
|
+
"name": "@validated",
|
|
122
|
+
"description": "Fired whenever the field is validated.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
85
127
|
{
|
|
86
128
|
"name": "@change",
|
|
87
129
|
"description": "Fired when the user commits a value change.",
|
|
@@ -102,12 +144,19 @@
|
|
|
102
144
|
"value": {
|
|
103
145
|
"kind": "expression"
|
|
104
146
|
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "@invalid-changed",
|
|
150
|
+
"description": "Fired when the `invalid` property changes.",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
105
154
|
}
|
|
106
155
|
]
|
|
107
156
|
},
|
|
108
157
|
{
|
|
109
158
|
"name": "vaadin-date-picker",
|
|
110
|
-
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/
|
|
159
|
+
"description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
111
160
|
"extension": true,
|
|
112
161
|
"attributes": [
|
|
113
162
|
{
|
|
@@ -139,15 +188,15 @@
|
|
|
139
188
|
}
|
|
140
189
|
},
|
|
141
190
|
{
|
|
142
|
-
"name": "?
|
|
143
|
-
"description": "
|
|
191
|
+
"name": "?clearButtonVisible",
|
|
192
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
144
193
|
"value": {
|
|
145
194
|
"kind": "expression"
|
|
146
195
|
}
|
|
147
196
|
},
|
|
148
197
|
{
|
|
149
|
-
"name": "?
|
|
150
|
-
"description": "
|
|
198
|
+
"name": "?autoselect",
|
|
199
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
151
200
|
"value": {
|
|
152
201
|
"kind": "expression"
|
|
153
202
|
}
|
|
@@ -201,6 +250,20 @@
|
|
|
201
250
|
"kind": "expression"
|
|
202
251
|
}
|
|
203
252
|
},
|
|
253
|
+
{
|
|
254
|
+
"name": ".accessibleName",
|
|
255
|
+
"description": "String used to label the component to screen reader users.",
|
|
256
|
+
"value": {
|
|
257
|
+
"kind": "expression"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": ".accessibleNameRef",
|
|
262
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
263
|
+
"value": {
|
|
264
|
+
"kind": "expression"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
204
267
|
{
|
|
205
268
|
"name": ".value",
|
|
206
269
|
"description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
|
|
@@ -236,6 +299,13 @@
|
|
|
236
299
|
"kind": "expression"
|
|
237
300
|
}
|
|
238
301
|
},
|
|
302
|
+
{
|
|
303
|
+
"name": ".overlayClass",
|
|
304
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
305
|
+
"value": {
|
|
306
|
+
"kind": "expression"
|
|
307
|
+
}
|
|
308
|
+
},
|
|
239
309
|
{
|
|
240
310
|
"name": ".initialPosition",
|
|
241
311
|
"description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
|
|
@@ -245,7 +315,7 @@
|
|
|
245
315
|
},
|
|
246
316
|
{
|
|
247
317
|
"name": ".i18n",
|
|
248
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n //
|
|
318
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // Used for adjusting the year value when parsing dates with short years.\n // The year values between 0 and 99 are evaluated and adjusted.\n // Example: for a referenceDate of 1970-10-30;\n // dateToBeParsed: 40-10-30, result: 1940-10-30\n // dateToBeParsed: 80-10-30, result: 1980-10-30\n // dateToBeParsed: 10-10-30, result: 2010-10-30\n // Supported date format: ISO 8601 `\"YYYY-MM-DD\"` (default)\n // The default value is the current date.\n referenceDate: '',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
|
|
249
319
|
"value": {
|
|
250
320
|
"kind": "expression"
|
|
251
321
|
}
|