@vaadin/time-picker 25.3.0-alpha9 → 25.3.0-beta1

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 (10) hide show
  1. package/custom-elements.json +4 -4
  2. package/package.json +14 -14
  3. package/src/vaadin-time-picker-helper.d.ts +3 -0
  4. package/src/vaadin-time-picker-helper.js +15 -7
  5. package/src/vaadin-time-picker-mixin.d.ts +5 -0
  6. package/src/vaadin-time-picker-mixin.js +103 -90
  7. package/src/vaadin-time-picker.d.ts +42 -8
  8. package/src/vaadin-time-picker.js +42 -8
  9. package/web-types.json +3 -3
  10. package/web-types.lit.json +3 -3
package/custom-elements.json CHANGED
@@ -74,7 +74,7 @@
74
74
  }
75
75
  }
76
76
  ],
77
- "description": "A function to validate the time object based on the given step.",
77
+ "description": "A function to validate the time object based on the given step.\n\nReturns a new object, so that a time object owned by the caller, such as one\nreturned by the `i18n.parseTime` function, is left as it is.",
78
78
  "return": {
79
79
  "type": {
80
80
  "text": "object | undefined"
@@ -315,7 +315,7 @@
315
315
  "type": {
316
316
  "text": "Object"
317
317
  },
318
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.",
318
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
319
319
  "attribute": "i18n",
320
320
  "inheritedFrom": {
321
321
  "name": "I18nMixin",
@@ -910,7 +910,7 @@
910
910
  "declarations": [
911
911
  {
912
912
  "kind": "class",
913
- "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-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\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",
913
+ "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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\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",
914
914
  "name": "TimePicker",
915
915
  "members": [
916
916
  {
@@ -1106,7 +1106,7 @@
1106
1106
  "type": {
1107
1107
  "text": "Object"
1108
1108
  },
1109
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.",
1109
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
1110
1110
  "attribute": "i18n",
1111
1111
  "inheritedFrom": {
1112
1112
  "name": "I18nMixin",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/time-picker",
3
- "version": "25.3.0-alpha9",
3
+ "version": "25.3.0-beta1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,22 +35,22 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.3.0-alpha9",
39
- "@vaadin/combo-box": "25.3.0-alpha9",
40
- "@vaadin/component-base": "25.3.0-alpha9",
41
- "@vaadin/field-base": "25.3.0-alpha9",
42
- "@vaadin/input-container": "25.3.0-alpha9",
43
- "@vaadin/item": "25.3.0-alpha9",
44
- "@vaadin/overlay": "25.3.0-alpha9",
45
- "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
38
+ "@vaadin/a11y-base": "25.3.0-beta1",
39
+ "@vaadin/combo-box": "25.3.0-beta1",
40
+ "@vaadin/component-base": "25.3.0-beta1",
41
+ "@vaadin/field-base": "25.3.0-beta1",
42
+ "@vaadin/input-container": "25.3.0-beta1",
43
+ "@vaadin/item": "25.3.0-beta1",
44
+ "@vaadin/overlay": "25.3.0-beta1",
45
+ "@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
46
46
  "lit": "^3.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@vaadin/aura": "25.3.0-alpha9",
50
- "@vaadin/chai-plugins": "25.3.0-alpha9",
51
- "@vaadin/test-runner-commands": "25.3.0-alpha9",
49
+ "@vaadin/aura": "25.3.0-beta1",
50
+ "@vaadin/chai-plugins": "25.3.0-beta1",
51
+ "@vaadin/test-runner-commands": "25.3.0-beta1",
52
52
  "@vaadin/testing-helpers": "^2.0.0",
53
- "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
53
+ "@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
54
54
  "sinon": "^22.0.0"
55
55
  },
56
56
  "customElements": "custom-elements.json",
@@ -58,5 +58,5 @@
58
58
  "web-types.json",
59
59
  "web-types.lit.json"
60
60
  ],
61
- "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
61
+ "gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
62
62
  }
package/src/vaadin-time-picker-helper.d.ts CHANGED
@@ -25,6 +25,9 @@ export function parseISOTime(timeString: string): TimePickerTime | undefined;
25
25
 
26
26
  /**
27
27
  * A function to validate the time object based on the given step.
28
+ *
29
+ * Returns a new object, so that a time object owned by the caller, such as one
30
+ * returned by the `i18n.parseTime` function, is left as it is.
28
31
  */
29
32
  export function validateTime(
30
33
  timeObject: TimePickerTime | undefined,
package/src/vaadin-time-picker-helper.js CHANGED
@@ -75,17 +75,25 @@ function getStepSegment(stepValue) {
75
75
  /**
76
76
  * A function to validate the time object based on the given step.
77
77
  *
78
+ * Returns a new object, so that a time object owned by the caller, such as one
79
+ * returned by the `i18n.parseTime` function, is left as it is.
80
+ *
78
81
  * @param {object} timeObject
79
82
  * @param {number} step
80
83
  * @return {object | undefined}
81
84
  */
82
85
  export function validateTime(timeObject, step) {
83
- if (timeObject) {
84
- const stepSegment = getStepSegment(step);
85
- timeObject.hours = parseInt(timeObject.hours);
86
- timeObject.minutes = parseInt(timeObject.minutes || 0);
87
- timeObject.seconds = stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0);
88
- timeObject.milliseconds = stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0);
86
+ if (!timeObject) {
87
+ return timeObject;
89
88
  }
90
- return timeObject;
89
+
90
+ const stepSegment = getStepSegment(step);
91
+
92
+ return {
93
+ ...timeObject,
94
+ hours: parseInt(timeObject.hours),
95
+ minutes: parseInt(timeObject.minutes || 0),
96
+ seconds: stepSegment < 3 ? undefined : parseInt(timeObject.seconds || 0),
97
+ milliseconds: stepSegment < 4 ? undefined : parseInt(timeObject.milliseconds || 0),
98
+ };
91
99
  }
package/src/vaadin-time-picker-mixin.d.ts CHANGED
@@ -129,6 +129,11 @@ export declare class TimePickerMixinClass {
129
129
  *
130
130
  * NOTE: `formatTime` and `parseTime` must be implemented in a
131
131
  * compatible manner to ensure the component works properly.
132
+ *
133
+ * NOTE: these functions only apply to the text shown in the input field and
134
+ * in the dropdown. The `value`, `min` and `max` properties always use the
135
+ * ISO 8601 format, and are never passed to `parseTime`, so implementations
136
+ * do not need to accept ISO 8601 input.
132
137
  */
133
138
  i18n: TimePickerI18n;
134
139
  }
package/src/vaadin-time-picker-mixin.js CHANGED
@@ -95,7 +95,6 @@ export const TimePickerMixin = (superClass) =>
95
95
  _comboBoxValue: {
96
96
  type: String,
97
97
  sync: true,
98
- observer: '__comboBoxValueChanged',
99
98
  },
100
99
 
101
100
  /** @private */
@@ -108,9 +107,8 @@ export const TimePickerMixin = (superClass) =>
108
107
  static get observers() {
109
108
  return [
110
109
  '_openedOrItemsChanged(opened, _dropdownItems)',
111
- '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
110
+ '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme, value)',
112
111
  '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
113
- '__updateDropdownItems(__effectiveI18n, min, max, step)',
114
112
  ];
115
113
  }
116
114
 
@@ -169,6 +167,11 @@ export const TimePickerMixin = (superClass) =>
169
167
  * NOTE: `formatTime` and `parseTime` must be implemented in a
170
168
  * compatible manner to ensure the component works properly.
171
169
  *
170
+ * NOTE: these functions only apply to the text shown in the input field and
171
+ * in the dropdown. The `value`, `min` and `max` properties always use the
172
+ * ISO 8601 format, and are never passed to `parseTime`, so implementations
173
+ * do not need to accept ISO 8601 input.
174
+ *
172
175
  * @type {!TimePickerI18n}
173
176
  */
174
177
  get i18n() {
@@ -229,9 +232,21 @@ export const TimePickerMixin = (superClass) =>
229
232
  updated(props) {
230
233
  super.updated(props);
231
234
 
232
- // Update selected item in the scroller
233
- if (props.has('_comboBoxValue') && this._dropdownItems) {
234
- this._scroller.selectedItem = this._dropdownItems.find((item) => item.value === this._comboBoxValue);
235
+ if (['__effectiveI18n', 'min', 'max', 'step'].some((prop) => props.has(prop))) {
236
+ this.__updateDropdownItems();
237
+ }
238
+
239
+ if (props.has('step')) {
240
+ const time = this.__getTimeObject(this.value);
241
+ this.value = formatISOTime(time);
242
+ // Always update the input value, even if the component value hasn't
243
+ // changed, so that the text matches the step interval. For example,
244
+ // if the step is 3600 "10:00:50" should become "10:00".
245
+ this.__updateInputValue(time);
246
+ }
247
+
248
+ if (props.has('__effectiveI18n') && this.value) {
249
+ this.__updateInputValue(this.__getTimeObject(this.value));
235
250
  }
236
251
  }
237
252
 
@@ -244,7 +259,7 @@ export const TimePickerMixin = (superClass) =>
244
259
  checkValidity() {
245
260
  return !!(
246
261
  this.inputElement.checkValidity() &&
247
- (!this.value || this._timeAllowed(this.__effectiveI18n.parseTime(this.value))) &&
262
+ (!this.value || this._timeAllowed(parseISOTime(this.value))) &&
248
263
  (!this._comboBoxValue || this.__effectiveI18n.parseTime(this._comboBoxValue))
249
264
  );
250
265
  }
@@ -259,7 +274,7 @@ export const TimePickerMixin = (superClass) =>
259
274
  }
260
275
 
261
276
  /** @private */
262
- _updateScroller(opened, items, focusedIndex, theme) {
277
+ _updateScroller(opened, items, focusedIndex, theme, value) {
263
278
  if (opened) {
264
279
  this._scroller.style.maxHeight =
265
280
  getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
@@ -272,6 +287,7 @@ export const TimePickerMixin = (superClass) =>
272
287
  opened,
273
288
  focusedIndex,
274
289
  theme,
290
+ selectedItem: items?.find((item) => item.value === value),
275
291
  });
276
292
  }
277
293
 
@@ -306,8 +322,7 @@ export const TimePickerMixin = (superClass) =>
306
322
  * @override
307
323
  */
308
324
  _onClearAction() {
309
- this._comboBoxValue = '';
310
- this._inputElementValue = '';
325
+ this.__setValueFromText('');
311
326
 
312
327
  this.__commitValueChange();
313
328
  }
@@ -321,14 +336,12 @@ export const TimePickerMixin = (superClass) =>
321
336
  if (this._focusedIndex > -1) {
322
337
  // Commit value based on focused index
323
338
  const focusedItem = this._dropdownItems[this._focusedIndex];
324
- const itemValue = this._getItemLabel(focusedItem);
325
- this._inputElementValue = itemValue;
326
- this._comboBoxValue = itemValue;
339
+ this.__setValueFromTime(parseISOTime(focusedItem.value));
327
340
  this._focusedIndex = -1;
328
- } else if (this._inputElementValue === '' || this._inputElementValue === undefined) {
329
- this._comboBoxValue = '';
330
- } else {
331
- this._comboBoxValue = this._inputElementValue;
341
+ } else if (this._inputElementValue !== this._comboBoxValue) {
342
+ // Committing text that did not change would parse and format it again,
343
+ // and set the value from the result, so skip it.
344
+ this.__setValueFromText(this._inputElementValue || '');
332
345
  }
333
346
 
334
347
  this.__commitValueChange();
@@ -408,12 +421,12 @@ export const TimePickerMixin = (superClass) =>
408
421
  const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step, true);
409
422
  this.__memoValue = objWithStep;
410
423
 
411
- // Setting `_comboBoxValue` property triggers the synchronous
412
- // observer where the value can be parsed again, so we set
413
- // this flag to ensure it does not alter the value.
414
- this.__useMemo = true;
415
- this._comboBoxValue = this.__effectiveI18n.formatTime(objWithStep);
416
- this.__useMemo = false;
424
+ // Only commit when the formatted text changes, so that a step finer than
425
+ // the formatter can show does not move the value on its own, see #6397.
426
+ const text = this.__effectiveI18n.formatTime(objWithStep) || '';
427
+ if (text !== this._comboBoxValue) {
428
+ this.__setValueFromTime(objWithStep);
429
+ }
417
430
 
418
431
  this.__commitValueChange();
419
432
  }
@@ -463,6 +476,15 @@ export const TimePickerMixin = (superClass) =>
463
476
  return result;
464
477
  }
465
478
 
479
+ /**
480
+ * Returning Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
481
+ * from an ISO 8601 time, stripped to the resolution defined by the step.
482
+ * @private
483
+ */
484
+ __getTimeObject(timeString) {
485
+ return validateTime(parseISOTime(timeString), this.step);
486
+ }
487
+
466
488
  /**
467
489
  * Returning seconds from Object in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
468
490
  * @private
@@ -509,24 +531,11 @@ export const TimePickerMixin = (superClass) =>
509
531
  }
510
532
 
511
533
  /** @private */
512
- __updateDropdownItems(effectiveI18n, min, max, step) {
513
- const minTimeObj = validateTime(parseISOTime(min || MIN_ALLOWED_TIME), step);
514
- const minSec = this.__getSec(minTimeObj);
515
-
516
- const maxTimeObj = validateTime(parseISOTime(max || MAX_ALLOWED_TIME), step);
517
- const maxSec = this.__getSec(maxTimeObj);
518
-
519
- this._dropdownItems = this.__generateDropdownList(minSec, maxSec, step);
520
-
521
- if (step !== this.__oldStep) {
522
- this.__oldStep = step;
523
- const parsedObj = validateTime(parseISOTime(this.value), step);
524
- this.__updateValue(parsedObj);
525
- }
534
+ __updateDropdownItems() {
535
+ const minSec = this.__getSec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
536
+ const maxSec = this.__getSec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
526
537
 
527
- if (this.value) {
528
- this._comboBoxValue = effectiveI18n.formatTime(effectiveI18n.parseTime(this.value));
529
- }
538
+ this._dropdownItems = this.__generateDropdownList(minSec, maxSec, this.step);
530
539
  }
531
540
 
532
541
  /** @private */
@@ -562,7 +571,7 @@ export const TimePickerMixin = (superClass) =>
562
571
  const timeObj = validateTime(this.__addStep(time * 1000, step), step);
563
572
  time += step;
564
573
  const formatted = this.__effectiveI18n.formatTime(timeObj);
565
- generatedList.push({ label: formatted, value: formatted });
574
+ generatedList.push({ label: formatted, value: formatISOTime(timeObj) });
566
575
  }
567
576
 
568
577
  return generatedList;
@@ -574,8 +583,9 @@ export const TimePickerMixin = (superClass) =>
574
583
  * @override
575
584
  */
576
585
  _valueChanged(value, oldValue) {
577
- const parsedObj = (this.__memoValue = parseISOTime(value));
578
- const newValue = formatISOTime(parsedObj) || '';
586
+ // Strip value to the step resolution before marking as committed.
587
+ const parsedObj = (this.__memoValue = this.__getTimeObject(value));
588
+ const newValue = formatISOTime(parsedObj);
579
589
 
580
590
  // Mark value set programmatically by the user
581
591
  // as committed for the change event detection.
@@ -590,64 +600,67 @@ export const TimePickerMixin = (superClass) =>
590
600
  } else if (value !== newValue) {
591
601
  // Value can be parsed (e.g. 12 -> 12:00), adjust.
592
602
  this.value = newValue;
593
- } else if (this.__keepInvalidInput) {
594
- // User input could not be parsed and was reset
595
- // to empty string, do not update input value.
596
- delete this.__keepInvalidInput;
597
- } else {
603
+ } else if (!this.__keepCommittedValue) {
598
604
  this.__updateInputValue(parsedObj);
599
605
  }
600
606
 
601
607
  this._toggleHasValue(this._hasValue);
602
608
  }
603
609
 
604
- /** @private */
605
- __comboBoxValueChanged(value, oldValue) {
606
- if (value === '' && oldValue === undefined) {
607
- return;
608
- }
610
+ /**
611
+ * Sets the value without marking it as committed, so that
612
+ * `__commitValueChange()` can still detect the change and
613
+ * fire an event for it.
614
+ *
615
+ * @param {string} value
616
+ * @private
617
+ */
618
+ __setUncommittedValue(value) {
619
+ this.__keepCommittedValue = true;
620
+ this.value = value;
621
+ this.__keepCommittedValue = false;
622
+ }
609
623
 
610
- const parsedObj = this.__useMemo ? this.__memoValue : this.__effectiveI18n.parseTime(value);
611
- const newValue = this.__effectiveI18n.formatTime(parsedObj) || '';
624
+ /**
625
+ * Sets the value and the input text from the given time,
626
+ * stripped to the resolution defined by the step.
627
+ *
628
+ * @param {!TimePickerTime} time
629
+ * @private
630
+ */
631
+ __setValueFromTime(time) {
632
+ const stripped = validateTime(time, this.step);
633
+ this.__setUncommittedValue(formatISOTime(stripped));
634
+ this.__updateInputValue(stripped);
635
+ }
612
636
 
613
- if (parsedObj) {
614
- if (value !== newValue) {
615
- this._comboBoxValue = newValue;
616
- } else {
617
- this.__keepCommittedValue = true;
618
- this.__updateValue(parsedObj);
619
- this.__keepCommittedValue = false;
620
- }
621
- } else {
622
- // If the user input can not be parsed, set a flag
623
- // that prevents `__valueChanged` from removing the input
624
- // after setting the value property to an empty string below.
625
- if (this.value !== '' && value !== '') {
626
- this.__keepInvalidInput = true;
627
- }
637
+ /**
638
+ * Sets the value from the given text. When the text can not be parsed as a
639
+ * time, the value is set to an empty string and the text is left in the
640
+ * input for the user to correct.
641
+ *
642
+ * @param {string} text
643
+ * @private
644
+ */
645
+ __setValueFromText(text) {
646
+ // Skip parsing an empty field to not call custom `i18n.parseTime` for it.
647
+ const parsed = text ? this.__effectiveI18n.parseTime(text) : undefined;
628
648
 
629
- this.__keepCommittedValue = true;
630
- this.value = '';
631
- this.__keepCommittedValue = false;
649
+ if (parsed) {
650
+ this.__setValueFromTime(parsed);
651
+ return;
632
652
  }
633
- }
634
-
635
- /** @private */
636
- __updateValue(obj) {
637
- const timeString = formatISOTime(validateTime(obj, this.step)) || '';
638
- this.value = timeString;
639
653
 
640
- // Always strip the input value to match the step interval, even
641
- // if the component value hasn't changed. For example, if the step
642
- // is 3600 "10:00:50" should become "10:00".
643
- this.__updateInputValue(obj);
654
+ this.__setUncommittedValue('');
655
+ this._inputElementValue = text;
656
+ this._comboBoxValue = text;
644
657
  }
645
658
 
646
659
  /** @private */
647
660
  __updateInputValue(obj) {
648
- const timeString = this.__effectiveI18n.formatTime(validateTime(obj, this.step)) || '';
649
- this._inputElementValue = timeString;
650
- this._comboBoxValue = timeString;
661
+ const text = this.__effectiveI18n.formatTime(obj) || '';
662
+ this._inputElementValue = text;
663
+ this._comboBoxValue = text;
651
664
  }
652
665
 
653
666
  /**
@@ -658,12 +671,12 @@ export const TimePickerMixin = (superClass) =>
658
671
  * @protected
659
672
  */
660
673
  _timeAllowed(time) {
661
- const parsedMin = this.__effectiveI18n.parseTime(this.min || MIN_ALLOWED_TIME);
662
- const parsedMax = this.__effectiveI18n.parseTime(this.max || MAX_ALLOWED_TIME);
674
+ const parsedMin = parseISOTime(this.min || MIN_ALLOWED_TIME);
675
+ const parsedMax = parseISOTime(this.max || MAX_ALLOWED_TIME);
663
676
 
664
677
  return (
665
- (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
666
- (!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax))
678
+ (!parsedMin || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
679
+ (!parsedMax || this.__getMsec(time) <= this.__getMsec(parsedMax))
667
680
  );
668
681
  }
669
682
 
package/src/vaadin-time-picker.d.ts CHANGED
@@ -72,14 +72,6 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
72
72
  *
73
73
  * ### Styling
74
74
  *
75
- * The following custom properties are available for styling:
76
- *
77
- * Custom property | Description | Default
78
- * -----------------------------------------|----------------------------|---------
79
- * `--vaadin-field-default-width` | Default width of the field | `12em`
80
- * `--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`
81
- * `--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`
82
- *
83
75
  * The following shadow DOM parts are available for styling:
84
76
  *
85
77
  * Part name | Description
@@ -111,6 +103,48 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
111
103
  * `readonly` | Set when the element is readonly
112
104
  * `opened` | Set when the overlay is opened
113
105
  *
106
+ * The following custom CSS properties are available for styling:
107
+ *
108
+ * Custom CSS property |
109
+ * :--------------------------------------------------|
110
+ * | `--vaadin-field-default-width` |
111
+ * | `--vaadin-input-field-background` |
112
+ * | `--vaadin-input-field-border-color` |
113
+ * | `--vaadin-input-field-border-radius` |
114
+ * | `--vaadin-input-field-border-width` |
115
+ * | `--vaadin-input-field-bottom-end-radius` |
116
+ * | `--vaadin-input-field-bottom-start-radius` |
117
+ * | `--vaadin-input-field-button-text-color` |
118
+ * | `--vaadin-input-field-container-gap` |
119
+ * | `--vaadin-input-field-disabled-background` |
120
+ * | `--vaadin-input-field-disabled-text-color` |
121
+ * | `--vaadin-input-field-error-color` |
122
+ * | `--vaadin-input-field-error-font-size` |
123
+ * | `--vaadin-input-field-error-font-weight` |
124
+ * | `--vaadin-input-field-error-line-height` |
125
+ * | `--vaadin-input-field-gap` |
126
+ * | `--vaadin-input-field-helper-color` |
127
+ * | `--vaadin-input-field-helper-font-size` |
128
+ * | `--vaadin-input-field-helper-font-weight` |
129
+ * | `--vaadin-input-field-helper-line-height` |
130
+ * | `--vaadin-input-field-label-color` |
131
+ * | `--vaadin-input-field-label-font-size` |
132
+ * | `--vaadin-input-field-label-font-weight` |
133
+ * | `--vaadin-input-field-label-line-height` |
134
+ * | `--vaadin-input-field-padding` |
135
+ * | `--vaadin-input-field-placeholder-color` |
136
+ * | `--vaadin-input-field-required-indicator` |
137
+ * | `--vaadin-input-field-required-indicator-color` |
138
+ * | `--vaadin-input-field-top-end-radius` |
139
+ * | `--vaadin-input-field-top-start-radius` |
140
+ * | `--vaadin-input-field-value-color` |
141
+ * | `--vaadin-input-field-value-font-size` |
142
+ * | `--vaadin-input-field-value-font-weight` |
143
+ * | `--vaadin-input-field-value-line-height` |
144
+ * | `--vaadin-item-overlay-padding` |
145
+ * | `--vaadin-time-picker-overlay-max-height` |
146
+ * | `--vaadin-time-picker-overlay-width` |
147
+ *
114
148
  * ### Internal components
115
149
  *
116
150
  * In addition to `<vaadin-time-picker>` itself, the following internal
package/src/vaadin-time-picker.js CHANGED
@@ -32,14 +32,6 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
32
32
  *
33
33
  * ### Styling
34
34
  *
35
- * The following custom properties are available for styling:
36
- *
37
- * Custom property | Description | Default
38
- * -----------------------------------------|----------------------------|---------
39
- * `--vaadin-field-default-width` | Default width of the field | `12em`
40
- * `--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`
41
- * `--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`
42
- *
43
35
  * The following shadow DOM parts are available for styling:
44
36
  *
45
37
  * Part name | Description
@@ -71,6 +63,48 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
71
63
  * `readonly` | Set when the element is readonly
72
64
  * `opened` | Set when the overlay is opened
73
65
  *
66
+ * The following custom CSS properties are available for styling:
67
+ *
68
+ * Custom CSS property |
69
+ * :--------------------------------------------------|
70
+ * | `--vaadin-field-default-width` |
71
+ * | `--vaadin-input-field-background` |
72
+ * | `--vaadin-input-field-border-color` |
73
+ * | `--vaadin-input-field-border-radius` |
74
+ * | `--vaadin-input-field-border-width` |
75
+ * | `--vaadin-input-field-bottom-end-radius` |
76
+ * | `--vaadin-input-field-bottom-start-radius` |
77
+ * | `--vaadin-input-field-button-text-color` |
78
+ * | `--vaadin-input-field-container-gap` |
79
+ * | `--vaadin-input-field-disabled-background` |
80
+ * | `--vaadin-input-field-disabled-text-color` |
81
+ * | `--vaadin-input-field-error-color` |
82
+ * | `--vaadin-input-field-error-font-size` |
83
+ * | `--vaadin-input-field-error-font-weight` |
84
+ * | `--vaadin-input-field-error-line-height` |
85
+ * | `--vaadin-input-field-gap` |
86
+ * | `--vaadin-input-field-helper-color` |
87
+ * | `--vaadin-input-field-helper-font-size` |
88
+ * | `--vaadin-input-field-helper-font-weight` |
89
+ * | `--vaadin-input-field-helper-line-height` |
90
+ * | `--vaadin-input-field-label-color` |
91
+ * | `--vaadin-input-field-label-font-size` |
92
+ * | `--vaadin-input-field-label-font-weight` |
93
+ * | `--vaadin-input-field-label-line-height` |
94
+ * | `--vaadin-input-field-padding` |
95
+ * | `--vaadin-input-field-placeholder-color` |
96
+ * | `--vaadin-input-field-required-indicator` |
97
+ * | `--vaadin-input-field-required-indicator-color` |
98
+ * | `--vaadin-input-field-top-end-radius` |
99
+ * | `--vaadin-input-field-top-start-radius` |
100
+ * | `--vaadin-input-field-value-color` |
101
+ * | `--vaadin-input-field-value-font-size` |
102
+ * | `--vaadin-input-field-value-font-weight` |
103
+ * | `--vaadin-input-field-value-line-height` |
104
+ * | `--vaadin-item-overlay-padding` |
105
+ * | `--vaadin-time-picker-overlay-max-height` |
106
+ * | `--vaadin-time-picker-overlay-width` |
107
+ *
74
108
  * ### Internal components
75
109
  *
76
110
  * In addition to `<vaadin-time-picker>` itself, the following internal
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": "25.3.0-alpha9",
4
+ "version": "25.3.0-beta1",
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-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha9/#/elements/vaadin-item).\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",
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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-item).\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",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "accessible-description-ref",
@@ -348,7 +348,7 @@
348
348
  },
349
349
  {
350
350
  "name": "i18n",
351
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.",
351
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
352
352
  "value": {
353
353
  "type": [
354
354
  "Object"
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": "25.3.0-alpha9",
4
+ "version": "25.3.0-beta1",
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-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha9/#/elements/vaadin-item).\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",
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 shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and buttons\n`field-button` | Set on both clear and toggle buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-item).\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",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -98,7 +98,7 @@
98
98
  },
99
99
  {
100
100
  "name": ".i18n",
101
- "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.",
101
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides both the\ntime parsing and formatting functions.\n\nThe object has the following JSON structure:\n\n```js\n{\n // A function to format given `Object` as\n // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`\n formatTime: (time) => {\n // returns a string representation of the given\n // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats\n },\n\n // A function to parse the given text to an `Object` in the format\n // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.\n // Must properly parse (at least) text\n // formatted by `formatTime`.\n parseTime: text => {\n // Parses a string in object/string that can be formatted by`formatTime`.\n }\n}\n```\n\nNOTE: `formatTime` and `parseTime` must be implemented in a\ncompatible manner to ensure the component works properly.\n\nNOTE: these functions only apply to the text shown in the input field and\nin the dropdown. The `value`, `min` and `max` properties always use the\nISO 8601 format, and are never passed to `parseTime`, so implementations\ndo not need to accept ISO 8601 input.",
102
102
  "value": {
103
103
  "kind": "expression"
104
104
  }