@vaadin/date-time-picker 24.6.0-alpha4 → 24.6.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/vaadin-date-time-picker.js +12 -61
- 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": "24.6.0-
|
|
3
|
+
"version": "24.6.0-alpha5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.6.0-
|
|
40
|
-
"@vaadin/component-base": "24.6.0-
|
|
41
|
-
"@vaadin/custom-field": "24.6.0-
|
|
42
|
-
"@vaadin/date-picker": "24.6.0-
|
|
43
|
-
"@vaadin/field-base": "24.6.0-
|
|
44
|
-
"@vaadin/time-picker": "24.6.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.6.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.6.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.6.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.6.0-alpha5",
|
|
40
|
+
"@vaadin/component-base": "24.6.0-alpha5",
|
|
41
|
+
"@vaadin/custom-field": "24.6.0-alpha5",
|
|
42
|
+
"@vaadin/date-picker": "24.6.0-alpha5",
|
|
43
|
+
"@vaadin/field-base": "24.6.0-alpha5",
|
|
44
|
+
"@vaadin/time-picker": "24.6.0-alpha5",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha5",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.6.0-alpha5",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha5"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@vaadin/chai-plugins": "24.6.0-
|
|
50
|
+
"@vaadin/chai-plugins": "24.6.0-alpha5",
|
|
51
51
|
"@vaadin/testing-helpers": "^1.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": "cbfa46fe276f254dcaa99a622710d56df7f0a539"
|
|
59
59
|
}
|
|
@@ -20,6 +20,7 @@ import {
|
|
|
20
20
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
21
21
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
22
22
|
import { TimePicker } from '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
23
|
+
import { formatISOTime, parseISOTime, validateTime } from '@vaadin/time-picker/src/vaadin-time-picker-helper.js';
|
|
23
24
|
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
24
25
|
|
|
25
26
|
registerStyles('vaadin-date-time-picker', inputFieldShared, { moduleId: 'vaadin-date-time-picker' });
|
|
@@ -778,26 +779,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
778
779
|
return formatUTCISODate(date);
|
|
779
780
|
}
|
|
780
781
|
|
|
781
|
-
/**
|
|
782
|
-
* Custom time object to string (ISO time)
|
|
783
|
-
* @param {!TimePickerTime} time Time components as properties { hours, minutes, seconds, milliseconds }
|
|
784
|
-
* @return {string} e.g. 'hh:mm', 'hh:mm:ss', 'hh:mm:ss.fff'
|
|
785
|
-
* @private
|
|
786
|
-
*/
|
|
787
|
-
__formatTimeISO(time) {
|
|
788
|
-
return timePickerI18nDefaults.formatTime(time);
|
|
789
|
-
}
|
|
790
|
-
|
|
791
|
-
/**
|
|
792
|
-
* String (ISO time) to custom time object
|
|
793
|
-
* @param {string} str e.g. 'hh:mm', 'hh:mm:ss', 'hh:mm:ss.fff'
|
|
794
|
-
* @return {!TimePickerTime | undefined} Time components as properties { hours, minutes, seconds, milliseconds }
|
|
795
|
-
* @private
|
|
796
|
-
*/
|
|
797
|
-
__parseTimeISO(str) {
|
|
798
|
-
return timePickerI18nDefaults.parseTime(str);
|
|
799
|
-
}
|
|
800
|
-
|
|
801
782
|
/**
|
|
802
783
|
* String (ISO date time) to Date object
|
|
803
784
|
* @param {string} str e.g. 'yyyy-mm-ddThh:mm', 'yyyy-mm-ddThh:mm:ss', 'yyyy-mm-ddThh:mm:ss.fff'
|
|
@@ -817,7 +798,7 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
817
798
|
return;
|
|
818
799
|
}
|
|
819
800
|
|
|
820
|
-
const time =
|
|
801
|
+
const time = parseISOTime(timeValue);
|
|
821
802
|
if (!time) {
|
|
822
803
|
return;
|
|
823
804
|
}
|
|
@@ -853,30 +834,19 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
853
834
|
* @private
|
|
854
835
|
*/
|
|
855
836
|
__dateToIsoTimeString(date) {
|
|
856
|
-
return
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
837
|
+
return formatISOTime(
|
|
838
|
+
validateTime(
|
|
839
|
+
{
|
|
840
|
+
hours: date.getUTCHours(),
|
|
841
|
+
minutes: date.getUTCMinutes(),
|
|
842
|
+
seconds: date.getUTCSeconds(),
|
|
843
|
+
milliseconds: date.getUTCMilliseconds(),
|
|
844
|
+
},
|
|
845
|
+
this.step,
|
|
846
|
+
),
|
|
863
847
|
);
|
|
864
848
|
}
|
|
865
849
|
|
|
866
|
-
/**
|
|
867
|
-
* @param {!TimePickerTime} timeObject
|
|
868
|
-
* @return {!TimePickerTime}
|
|
869
|
-
* @private
|
|
870
|
-
*/
|
|
871
|
-
__validateTime(timeObject) {
|
|
872
|
-
if (timeObject) {
|
|
873
|
-
const stepSegment = this.__getStepSegment();
|
|
874
|
-
timeObject.seconds = stepSegment < 3 ? undefined : timeObject.seconds;
|
|
875
|
-
timeObject.milliseconds = stepSegment < 4 ? undefined : timeObject.milliseconds;
|
|
876
|
-
}
|
|
877
|
-
return timeObject;
|
|
878
|
-
}
|
|
879
|
-
|
|
880
850
|
/**
|
|
881
851
|
* Returns true if the current input value satisfies all constraints (if any)
|
|
882
852
|
*
|
|
@@ -889,25 +859,6 @@ class DateTimePicker extends FieldMixin(DisabledMixin(FocusMixin(ThemableMixin(E
|
|
|
889
859
|
return !hasInvalidPickers && !hasEmptyRequiredPickers;
|
|
890
860
|
}
|
|
891
861
|
|
|
892
|
-
// Copied from vaadin-time-picker
|
|
893
|
-
/** @private */
|
|
894
|
-
__getStepSegment() {
|
|
895
|
-
const step = this.step == null ? 60 : parseFloat(this.step);
|
|
896
|
-
if (step % 3600 === 0) {
|
|
897
|
-
// Accept hours
|
|
898
|
-
return 1;
|
|
899
|
-
} else if (step % 60 === 0 || !step) {
|
|
900
|
-
// Accept minutes
|
|
901
|
-
return 2;
|
|
902
|
-
} else if (step % 1 === 0) {
|
|
903
|
-
// Accept seconds
|
|
904
|
-
return 3;
|
|
905
|
-
} else if (step < 1) {
|
|
906
|
-
// Accept milliseconds
|
|
907
|
-
return 4;
|
|
908
|
-
}
|
|
909
|
-
}
|
|
910
|
-
|
|
911
862
|
/**
|
|
912
863
|
* @param {Date} date1
|
|
913
864
|
* @param {Date} date2
|
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": "24.6.0-
|
|
4
|
+
"version": "24.6.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/24.6.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/24.6.0-alpha5/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.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.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
},
|
|
225
225
|
{
|
|
226
226
|
"name": "overlay-class",
|
|
227
|
-
"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/24.6.0-
|
|
227
|
+
"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/24.6.0-alpha5/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
228
228
|
"value": {
|
|
229
229
|
"type": [
|
|
230
230
|
"string",
|
|
@@ -461,7 +461,7 @@
|
|
|
461
461
|
},
|
|
462
462
|
{
|
|
463
463
|
"name": "i18n",
|
|
464
|
-
"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/24.6.0-
|
|
464
|
+
"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/24.6.0-alpha5/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-time-picker).",
|
|
465
465
|
"value": {
|
|
466
466
|
"type": [
|
|
467
467
|
"DateTimePickerI18n"
|
|
@@ -470,7 +470,7 @@
|
|
|
470
470
|
},
|
|
471
471
|
{
|
|
472
472
|
"name": "overlayClass",
|
|
473
|
-
"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/24.6.0-
|
|
473
|
+
"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/24.6.0-alpha5/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
474
474
|
"value": {
|
|
475
475
|
"type": [
|
|
476
476
|
"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": "24.6.0-
|
|
4
|
+
"version": "24.6.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/24.6.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/24.6.0-alpha5/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.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.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -161,14 +161,14 @@
|
|
|
161
161
|
},
|
|
162
162
|
{
|
|
163
163
|
"name": ".i18n",
|
|
164
|
-
"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/24.6.0-
|
|
164
|
+
"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/24.6.0-alpha5/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-time-picker).",
|
|
165
165
|
"value": {
|
|
166
166
|
"kind": "expression"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"name": ".overlayClass",
|
|
171
|
-
"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/24.6.0-
|
|
171
|
+
"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/24.6.0-alpha5/#/elements/vaadin-date-picker#property-overlayClass)\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-time-picker#property-overlayClass)",
|
|
172
172
|
"value": {
|
|
173
173
|
"kind": "expression"
|
|
174
174
|
}
|