@vaadin/time-picker 24.2.0-alpha10 → 24.2.0-alpha11
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 +34 -3
- 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-alpha11",
|
|
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-alpha11",
|
|
40
|
+
"@vaadin/component-base": "24.2.0-alpha11",
|
|
41
|
+
"@vaadin/field-base": "24.2.0-alpha11",
|
|
42
|
+
"@vaadin/input-container": "24.2.0-alpha11",
|
|
43
|
+
"@vaadin/item": "24.2.0-alpha11",
|
|
44
|
+
"@vaadin/overlay": "24.2.0-alpha11",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha11",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha11",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha11"
|
|
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": "a958207d5f6a09ca0e2dcf9f62194b3f92c8766a"
|
|
59
59
|
}
|
|
@@ -462,10 +462,26 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
462
462
|
__onArrowPressWithStep(step) {
|
|
463
463
|
const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
|
|
464
464
|
this.__memoValue = objWithStep;
|
|
465
|
-
|
|
465
|
+
|
|
466
|
+
// Setting `value` property triggers the synchronous observer
|
|
467
|
+
// that in turn updates `_comboBoxValue` (actual input value)
|
|
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
|
+
|
|
466
474
|
this.__dispatchChange();
|
|
467
475
|
}
|
|
468
476
|
|
|
477
|
+
/** @private */
|
|
478
|
+
__commitPendingValue() {
|
|
479
|
+
if (this.__committedValue !== this.value) {
|
|
480
|
+
this.__dispatchChange();
|
|
481
|
+
this.__committedValue = this.value;
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
469
485
|
/** @private */
|
|
470
486
|
__dispatchChange() {
|
|
471
487
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
@@ -597,6 +613,12 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
597
613
|
this.__updateInputValue(parsedObj);
|
|
598
614
|
}
|
|
599
615
|
|
|
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
|
+
|
|
600
622
|
this._toggleHasValue(this._hasValue);
|
|
601
623
|
}
|
|
602
624
|
|
|
@@ -606,14 +628,16 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
606
628
|
return;
|
|
607
629
|
}
|
|
608
630
|
|
|
609
|
-
const parsedObj = this.i18n.parseTime(value);
|
|
631
|
+
const parsedObj = this.__useMemo ? this.__memoValue : this.i18n.parseTime(value);
|
|
610
632
|
const newValue = this.i18n.formatTime(parsedObj) || '';
|
|
611
633
|
|
|
612
634
|
if (parsedObj) {
|
|
613
635
|
if (value !== newValue) {
|
|
614
636
|
this._comboBoxValue = newValue;
|
|
615
637
|
} else {
|
|
638
|
+
this.__skipCommittedValueUpdate = true;
|
|
616
639
|
this.__updateValue(parsedObj);
|
|
640
|
+
this.__skipCommittedValueUpdate = false;
|
|
617
641
|
}
|
|
618
642
|
} else {
|
|
619
643
|
// If the user input can not be parsed, set a flag
|
|
@@ -623,14 +647,21 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
623
647
|
this.__keepInvalidInput = true;
|
|
624
648
|
}
|
|
625
649
|
|
|
650
|
+
this.__skipCommittedValueUpdate = true;
|
|
626
651
|
this.value = '';
|
|
652
|
+
this.__skipCommittedValueUpdate = false;
|
|
627
653
|
}
|
|
628
654
|
}
|
|
629
655
|
|
|
630
656
|
/** @private */
|
|
631
657
|
__onComboBoxChange(event) {
|
|
632
658
|
event.stopPropagation();
|
|
633
|
-
|
|
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
|
+
}
|
|
634
665
|
}
|
|
635
666
|
|
|
636
667
|
/**
|
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-alpha11",
|
|
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-alpha11/#/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-alpha11/#/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-alpha11/#/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-alpha11/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/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-alpha11",
|
|
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-alpha11/#/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-alpha11/#/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-alpha11/#/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-alpha11/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha11/#/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
|
{
|