@vaadin/time-picker 24.2.0-alpha11 → 24.2.0-alpha12
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 +11 -11
- package/src/vaadin-time-picker.js +44 -26
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-alpha12",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/combo-box": "24.2.0-
|
|
40
|
-
"@vaadin/component-base": "24.2.0-
|
|
41
|
-
"@vaadin/field-base": "24.2.0-
|
|
42
|
-
"@vaadin/input-container": "24.2.0-
|
|
43
|
-
"@vaadin/item": "24.2.0-
|
|
44
|
-
"@vaadin/overlay": "24.2.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.2.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
39
|
+
"@vaadin/combo-box": "24.2.0-alpha12",
|
|
40
|
+
"@vaadin/component-base": "24.2.0-alpha12",
|
|
41
|
+
"@vaadin/field-base": "24.2.0-alpha12",
|
|
42
|
+
"@vaadin/input-container": "24.2.0-alpha12",
|
|
43
|
+
"@vaadin/item": "24.2.0-alpha12",
|
|
44
|
+
"@vaadin/overlay": "24.2.0-alpha12",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha12",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha12",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha12"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "854d2809340ef73f765350808bb92ed5c840d147"
|
|
59
59
|
}
|
|
@@ -18,6 +18,13 @@ import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaa
|
|
|
18
18
|
const MIN_ALLOWED_TIME = '00:00:00.000';
|
|
19
19
|
const MAX_ALLOWED_TIME = '23:59:59.999';
|
|
20
20
|
|
|
21
|
+
const TEST_TIME_OBJ = {
|
|
22
|
+
hours: 0,
|
|
23
|
+
minutes: 0,
|
|
24
|
+
seconds: 0,
|
|
25
|
+
milliseconds: 0,
|
|
26
|
+
};
|
|
27
|
+
|
|
21
28
|
registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-picker-styles' });
|
|
22
29
|
|
|
23
30
|
/**
|
|
@@ -228,6 +235,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
228
235
|
*/
|
|
229
236
|
step: {
|
|
230
237
|
type: Number,
|
|
238
|
+
observer: '__stepChanged',
|
|
231
239
|
},
|
|
232
240
|
|
|
233
241
|
/**
|
|
@@ -460,18 +468,11 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
460
468
|
|
|
461
469
|
/** @private */
|
|
462
470
|
__onArrowPressWithStep(step) {
|
|
463
|
-
const
|
|
464
|
-
this.
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
// with its own observer where the value can be parsed again,
|
|
469
|
-
// so we set this flag to ensure it does not alter the value.
|
|
470
|
-
this.__useMemo = true;
|
|
471
|
-
this.value = this.__formatISO(objWithStep);
|
|
472
|
-
this.__useMemo = false;
|
|
473
|
-
|
|
474
|
-
this.__dispatchChange();
|
|
471
|
+
const parsedObj = this.i18n.parseTime(this._comboBoxValue);
|
|
472
|
+
const objWithStep = this.__addStep(this.__getMsec(parsedObj), step, true);
|
|
473
|
+
this._comboBoxValue = this.i18n.formatTime(objWithStep);
|
|
474
|
+
this.validate();
|
|
475
|
+
this.__commitPendingValue();
|
|
475
476
|
}
|
|
476
477
|
|
|
477
478
|
/** @private */
|
|
@@ -596,9 +597,15 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
596
597
|
* @override
|
|
597
598
|
*/
|
|
598
599
|
_valueChanged(value, oldValue) {
|
|
599
|
-
const parsedObj =
|
|
600
|
+
const parsedObj = this.__parseISO(value);
|
|
600
601
|
const newValue = this.__formatISO(parsedObj) || '';
|
|
601
602
|
|
|
603
|
+
// Mark value set programmatically by the user
|
|
604
|
+
// as committed for the change event detection.
|
|
605
|
+
if (!this.__skipCommittedValueUpdate) {
|
|
606
|
+
this.__committedValue = value;
|
|
607
|
+
}
|
|
608
|
+
|
|
602
609
|
if (value !== '' && value !== null && !parsedObj) {
|
|
603
610
|
// Value can not be parsed, reset to the old one.
|
|
604
611
|
this.value = oldValue === undefined ? '' : oldValue;
|
|
@@ -613,12 +620,6 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
613
620
|
this.__updateInputValue(parsedObj);
|
|
614
621
|
}
|
|
615
622
|
|
|
616
|
-
// Mark value set programmatically by the user
|
|
617
|
-
// as committed for the change event detection.
|
|
618
|
-
if (!this.__skipCommittedValueUpdate) {
|
|
619
|
-
this.__committedValue = this.value;
|
|
620
|
-
}
|
|
621
|
-
|
|
622
623
|
this._toggleHasValue(this._hasValue);
|
|
623
624
|
}
|
|
624
625
|
|
|
@@ -628,7 +629,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
628
629
|
return;
|
|
629
630
|
}
|
|
630
631
|
|
|
631
|
-
const parsedObj = this.
|
|
632
|
+
const parsedObj = this.i18n.parseTime(value);
|
|
632
633
|
const newValue = this.i18n.formatTime(parsedObj) || '';
|
|
633
634
|
|
|
634
635
|
if (parsedObj) {
|
|
@@ -656,12 +657,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
656
657
|
/** @private */
|
|
657
658
|
__onComboBoxChange(event) {
|
|
658
659
|
event.stopPropagation();
|
|
659
|
-
|
|
660
|
-
const { value } = event.target;
|
|
661
|
-
// Do not fire change for bad input.
|
|
662
|
-
if (value === '' || this.i18n.parseTime(value)) {
|
|
663
|
-
this.__commitPendingValue();
|
|
664
|
-
}
|
|
660
|
+
this.__commitPendingValue();
|
|
665
661
|
}
|
|
666
662
|
|
|
667
663
|
/**
|
|
@@ -678,6 +674,28 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
678
674
|
this.validate();
|
|
679
675
|
}
|
|
680
676
|
|
|
677
|
+
/** @private */
|
|
678
|
+
__stepChanged(step) {
|
|
679
|
+
if (step == null) {
|
|
680
|
+
return;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
const parsedObj = this.i18n.parseTime(this.i18n.formatTime(TEST_TIME_OBJ));
|
|
684
|
+
if (
|
|
685
|
+
(step % 1 !== 0 && !parsedObj.milliseconds) ||
|
|
686
|
+
(step % 60 !== 0 && !parsedObj.seconds) ||
|
|
687
|
+
(step % (60 * 60) !== 0 && !parsedObj.minutes)
|
|
688
|
+
) {
|
|
689
|
+
console.warn(
|
|
690
|
+
`<vaadin-time-picker> The step ${step} seconds has been rejected because it's not compatible with the provided time formatter.`,
|
|
691
|
+
);
|
|
692
|
+
this.step = this.__previousStep;
|
|
693
|
+
return;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
this.__previousStep = step;
|
|
697
|
+
}
|
|
698
|
+
|
|
681
699
|
/** @private */
|
|
682
700
|
__updateValue(obj) {
|
|
683
701
|
const timeString = this.__formatISO(this.__validateTime(obj)) || '';
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha12",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-time-picker",
|
|
11
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-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-
|
|
11
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-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-alpha12/#/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` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/time-picker",
|
|
4
|
-
"version": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha12",
|
|
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-time-picker",
|
|
19
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-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-
|
|
19
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-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-alpha12/#/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` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha12/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|