@vaadin/time-picker 24.2.0-alpha9 → 24.2.0-beta2

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.
Files changed (8) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-time-picker-combo-box.js +4 -2
  3. package/src/vaadin-time-picker-item.js +3 -1
  4. package/src/vaadin-time-picker-overlay.js +2 -1
  5. package/src/vaadin-time-picker-scroller.js +4 -1
  6. package/src/vaadin-time-picker.js +34 -5
  7. package/web-types.json +2 -2
  8. 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-alpha9",
3
+ "version": "24.2.0-beta2",
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-alpha9",
40
- "@vaadin/component-base": "24.2.0-alpha9",
41
- "@vaadin/field-base": "24.2.0-alpha9",
42
- "@vaadin/input-container": "24.2.0-alpha9",
43
- "@vaadin/item": "24.2.0-alpha9",
44
- "@vaadin/overlay": "24.2.0-alpha9",
45
- "@vaadin/vaadin-lumo-styles": "24.2.0-alpha9",
46
- "@vaadin/vaadin-material-styles": "24.2.0-alpha9",
47
- "@vaadin/vaadin-themable-mixin": "24.2.0-alpha9"
39
+ "@vaadin/combo-box": "24.2.0-beta2",
40
+ "@vaadin/component-base": "24.2.0-beta2",
41
+ "@vaadin/field-base": "24.2.0-beta2",
42
+ "@vaadin/input-container": "24.2.0-beta2",
43
+ "@vaadin/item": "24.2.0-beta2",
44
+ "@vaadin/overlay": "24.2.0-beta2",
45
+ "@vaadin/vaadin-lumo-styles": "24.2.0-beta2",
46
+ "@vaadin/vaadin-material-styles": "24.2.0-beta2",
47
+ "@vaadin/vaadin-themable-mixin": "24.2.0-beta2"
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": "e9765733fea96542e379e02e6f42b07145893140"
58
+ "gitHead": "4b852f9a12d4dade7f0fb3c73b7212436cebf310"
59
59
  }
package/src/vaadin-time-picker-combo-box.js CHANGED
@@ -4,15 +4,17 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-time-picker-item.js';
7
- import './vaadin-time-picker-scroller.js';
8
7
  import './vaadin-time-picker-overlay.js';
8
+ import './vaadin-time-picker-scroller.js';
9
9
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
10
10
  import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
11
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
11
12
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
12
13
 
13
14
  /**
14
15
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
15
16
  *
17
+ * @customElement
16
18
  * @extends HTMLElement
17
19
  * @mixes ComboBoxMixin
18
20
  * @mixes ThemableMixin
@@ -104,4 +106,4 @@ class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolymerElement)) {
104
106
  }
105
107
  }
106
108
 
107
- customElements.define(TimePickerComboBox.is, TimePickerComboBox);
109
+ defineCustomElement(TimePickerComboBox);
package/src/vaadin-time-picker-item.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
7
  import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
8
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
9
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
10
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
10
11
 
@@ -29,6 +30,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
29
30
  *
30
31
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
31
32
  *
33
+ * @customElement
32
34
  * @mixes ComboBoxItemMixin
33
35
  * @mixes ThemableMixin
34
36
  * @mixes DirMixin
@@ -58,4 +60,4 @@ export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(Pol
58
60
  }
59
61
  }
60
62
 
61
- customElements.define(TimePickerItem.is, TimePickerItem);
63
+ defineCustomElement(TimePickerItem);
package/src/vaadin-time-picker-overlay.js CHANGED
@@ -5,6 +5,7 @@
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
7
  import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
8
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
9
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
10
  import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
10
11
  import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
@@ -53,4 +54,4 @@ export class TimePickerOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixi
53
54
  }
54
55
  }
55
56
 
56
- customElements.define(TimePickerOverlay.is, TimePickerOverlay);
57
+ defineCustomElement(TimePickerOverlay);
package/src/vaadin-time-picker-scroller.js CHANGED
@@ -5,9 +5,12 @@
5
5
  */
6
6
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
7
7
  import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
8
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
+
8
10
  /**
9
11
  * An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
10
12
  *
13
+ * @customElement
11
14
  * @extends HTMLElement
12
15
  * @mixes ComboBoxScrollerMixin
13
16
  * @private
@@ -49,4 +52,4 @@ export class TimePickerScroller extends ComboBoxScrollerMixin(PolymerElement) {
49
52
  }
50
53
  }
51
54
 
52
- customElements.define(TimePickerScroller.is, TimePickerScroller);
55
+ defineCustomElement(TimePickerScroller);
package/src/vaadin-time-picker.js CHANGED
@@ -6,6 +6,7 @@
6
6
  import '@vaadin/input-container/src/vaadin-input-container.js';
7
7
  import './vaadin-time-picker-combo-box.js';
8
8
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
9
+ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
10
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
10
11
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
11
12
  import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -77,6 +78,7 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
77
78
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
78
79
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
79
80
  *
81
+ * @customElement
80
82
  * @extends HTMLElement
81
83
  * @mixes ElementMixin
82
84
  * @mixes ThemableMixin
@@ -373,6 +375,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
373
375
  this._tooltipController = new TooltipController(this);
374
376
  this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
375
377
  this._tooltipController.setPosition('top');
378
+ this._tooltipController.setAriaTarget(this.inputElement);
376
379
  this.addController(this._tooltipController);
377
380
  }
378
381
 
@@ -461,8 +464,24 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
461
464
  __onArrowPressWithStep(step) {
462
465
  const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
463
466
  this.__memoValue = objWithStep;
464
- this.inputElement.value = this.i18n.formatTime(this.__validateTime(objWithStep));
465
- this.__dispatchChange();
467
+
468
+ // Setting `_comboBoxValue` property triggers the synchronous
469
+ // observer where the value can be parsed again, so we set
470
+ // this flag to ensure it does not alter the value.
471
+ this.__useMemo = true;
472
+ this._comboBoxValue = this.i18n.formatTime(objWithStep);
473
+ this.__useMemo = false;
474
+
475
+ this.validate();
476
+ this.__commitPendingValue();
477
+ }
478
+
479
+ /** @private */
480
+ __commitPendingValue() {
481
+ if (this.__committedValue !== this.value) {
482
+ this.__dispatchChange();
483
+ this.__committedValue = this.value;
484
+ }
466
485
  }
467
486
 
468
487
  /** @private */
@@ -582,6 +601,12 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
582
601
  const parsedObj = (this.__memoValue = this.__parseISO(value));
583
602
  const newValue = this.__formatISO(parsedObj) || '';
584
603
 
604
+ // Mark value set programmatically by the user
605
+ // as committed for the change event detection.
606
+ if (!this.__skipCommittedValueUpdate) {
607
+ this.__committedValue = value;
608
+ }
609
+
585
610
  if (value !== '' && value !== null && !parsedObj) {
586
611
  // Value can not be parsed, reset to the old one.
587
612
  this.value = oldValue === undefined ? '' : oldValue;
@@ -605,14 +630,16 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
605
630
  return;
606
631
  }
607
632
 
608
- const parsedObj = this.i18n.parseTime(value);
633
+ const parsedObj = this.__useMemo ? this.__memoValue : this.i18n.parseTime(value);
609
634
  const newValue = this.i18n.formatTime(parsedObj) || '';
610
635
 
611
636
  if (parsedObj) {
612
637
  if (value !== newValue) {
613
638
  this._comboBoxValue = newValue;
614
639
  } else {
640
+ this.__skipCommittedValueUpdate = true;
615
641
  this.__updateValue(parsedObj);
642
+ this.__skipCommittedValueUpdate = false;
616
643
  }
617
644
  } else {
618
645
  // If the user input can not be parsed, set a flag
@@ -622,14 +649,16 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
622
649
  this.__keepInvalidInput = true;
623
650
  }
624
651
 
652
+ this.__skipCommittedValueUpdate = true;
625
653
  this.value = '';
654
+ this.__skipCommittedValueUpdate = false;
626
655
  }
627
656
  }
628
657
 
629
658
  /** @private */
630
659
  __onComboBoxChange(event) {
631
660
  event.stopPropagation();
632
- this.__dispatchChange();
661
+ this.__commitPendingValue();
633
662
  }
634
663
 
635
664
  /**
@@ -742,6 +771,6 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
742
771
  */
743
772
  }
744
773
 
745
- customElements.define(TimePicker.is, TimePicker);
774
+ defineCustomElement(TimePicker);
746
775
 
747
776
  export { TimePicker };
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-alpha9",
4
+ "version": "24.2.0-beta2",
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-alpha9/#/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-alpha9/#/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-alpha9/#/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-alpha9/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/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.",
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-beta2/#/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-beta2/#/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-beta2/#/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-beta2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-beta2/#/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-alpha9",
4
+ "version": "24.2.0-beta2",
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-alpha9/#/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-alpha9/#/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-alpha9/#/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-alpha9/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha9/#/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.",
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-beta2/#/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-beta2/#/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-beta2/#/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-beta2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-beta2/#/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
  {