@vaadin/date-time-picker 25.0.0-alpha3 → 25.0.0-alpha5
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 +12 -12
- package/src/styles/vaadin-date-time-picker-core-styles.d.ts +8 -0
- package/src/styles/vaadin-date-time-picker-core-styles.js +27 -0
- package/src/vaadin-date-time-picker-mixin.js +1 -1
- package/src/vaadin-date-time-picker.js +7 -25
- package/web-types.json +5 -5
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
39
|
-
"@vaadin/component-base": "25.0.0-
|
|
40
|
-
"@vaadin/custom-field": "25.0.0-
|
|
41
|
-
"@vaadin/date-picker": "25.0.0-
|
|
42
|
-
"@vaadin/field-base": "25.0.0-
|
|
43
|
-
"@vaadin/time-picker": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.0.0-alpha5",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-alpha5",
|
|
40
|
+
"@vaadin/custom-field": "25.0.0-alpha5",
|
|
41
|
+
"@vaadin/date-picker": "25.0.0-alpha5",
|
|
42
|
+
"@vaadin/field-base": "25.0.0-alpha5",
|
|
43
|
+
"@vaadin/time-picker": "25.0.0-alpha5",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
49
|
+
"@vaadin/chai-plugins": "25.0.0-alpha5",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha5",
|
|
51
51
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
52
|
"sinon": "^18.0.0"
|
|
53
53
|
},
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
|
|
59
59
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2019 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
|
|
8
|
+
export const dateTimePickerStyles = css`
|
|
9
|
+
.vaadin-date-time-picker-container {
|
|
10
|
+
--vaadin-field-default-width: auto;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.slots {
|
|
14
|
+
display: flex;
|
|
15
|
+
--vaadin-field-default-width: 12em;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.slots ::slotted([slot='date-picker']) {
|
|
19
|
+
min-width: 0;
|
|
20
|
+
flex: 1 1 auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.slots ::slotted([slot='time-picker']) {
|
|
24
|
+
min-width: 0;
|
|
25
|
+
flex: 1 1.65 auto;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
@@ -5,12 +5,14 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
7
7
|
import '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
8
|
-
import {
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
12
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
13
|
+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
|
|
13
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
+
import { dateTimePickerStyles } from './styles/vaadin-date-time-picker-core-styles.js';
|
|
14
16
|
import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
15
17
|
|
|
16
18
|
/**
|
|
@@ -97,35 +99,15 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
|
97
99
|
* @mixes ThemableMixin
|
|
98
100
|
* @mixes DateTimePickerMixin
|
|
99
101
|
*/
|
|
100
|
-
class DateTimePicker extends DateTimePickerMixin(
|
|
102
|
+
class DateTimePicker extends DateTimePickerMixin(
|
|
103
|
+
ThemableMixin(ElementMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
|
|
104
|
+
) {
|
|
101
105
|
static get is() {
|
|
102
106
|
return 'vaadin-date-time-picker';
|
|
103
107
|
}
|
|
104
108
|
|
|
105
109
|
static get styles() {
|
|
106
|
-
return [
|
|
107
|
-
inputFieldShared,
|
|
108
|
-
css`
|
|
109
|
-
.vaadin-date-time-picker-container {
|
|
110
|
-
--vaadin-field-default-width: auto;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.slots {
|
|
114
|
-
display: flex;
|
|
115
|
-
--vaadin-field-default-width: 12em;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.slots ::slotted([slot='date-picker']) {
|
|
119
|
-
min-width: 0;
|
|
120
|
-
flex: 1 1 auto;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.slots ::slotted([slot='time-picker']) {
|
|
124
|
-
min-width: 0;
|
|
125
|
-
flex: 1 1.65 auto;
|
|
126
|
-
}
|
|
127
|
-
`,
|
|
128
|
-
];
|
|
110
|
+
return [inputFieldShared, dateTimePickerStyles];
|
|
129
111
|
}
|
|
130
112
|
|
|
131
113
|
/** @protected */
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha5",
|
|
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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\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.0.0-
|
|
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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\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.0.0-alpha5/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\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
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
},
|
|
236
236
|
{
|
|
237
237
|
"name": "overlay-class",
|
|
238
|
-
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
238
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
239
239
|
"value": {
|
|
240
240
|
"type": [
|
|
241
241
|
"string",
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
},
|
|
484
484
|
{
|
|
485
485
|
"name": "i18n",
|
|
486
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
486
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker).",
|
|
487
487
|
"value": {
|
|
488
488
|
"type": [
|
|
489
489
|
"DateTimePickerI18n"
|
|
@@ -492,7 +492,7 @@
|
|
|
492
492
|
},
|
|
493
493
|
{
|
|
494
494
|
"name": "overlayClass",
|
|
495
|
-
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
495
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
496
496
|
"value": {
|
|
497
497
|
"type": [
|
|
498
498
|
"string",
|
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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha5",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\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.0.0-
|
|
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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\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.0.0-alpha5/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to these components.\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
22
|
{
|
|
@@ -168,14 +168,14 @@
|
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"name": ".i18n",
|
|
171
|
-
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
171
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker).",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
176
|
{
|
|
177
177
|
"name": ".overlayClass",
|
|
178
|
-
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
178
|
+
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the `<vaadin-date-time-picker>`:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha5/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
179
179
|
"value": {
|
|
180
180
|
"kind": "expression"
|
|
181
181
|
}
|