@vaadin/time-picker 25.0.0-alpha17 → 25.0.0-alpha19

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 (5) hide show
  1. package/package.json +12 -12
  2. package/src/vaadin-time-picker-mixin.d.ts +11 -8
  3. package/src/vaadin-time-picker-mixin.js +58 -51
  4. package/web-types.json +20 -11
  5. package/web-types.lit.json +9 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/time-picker",
3
- "version": "25.0.0-alpha17",
3
+ "version": "25.0.0-alpha19",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,25 +34,25 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "@open-wc/dedupe-mixin": "^1.3.0",
37
- "@vaadin/combo-box": "25.0.0-alpha17",
38
- "@vaadin/component-base": "25.0.0-alpha17",
39
- "@vaadin/field-base": "25.0.0-alpha17",
40
- "@vaadin/input-container": "25.0.0-alpha17",
41
- "@vaadin/item": "25.0.0-alpha17",
42
- "@vaadin/overlay": "25.0.0-alpha17",
43
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha17",
37
+ "@vaadin/combo-box": "25.0.0-alpha19",
38
+ "@vaadin/component-base": "25.0.0-alpha19",
39
+ "@vaadin/field-base": "25.0.0-alpha19",
40
+ "@vaadin/input-container": "25.0.0-alpha19",
41
+ "@vaadin/item": "25.0.0-alpha19",
42
+ "@vaadin/overlay": "25.0.0-alpha19",
43
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha19",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/chai-plugins": "25.0.0-alpha17",
48
- "@vaadin/test-runner-commands": "25.0.0-alpha17",
47
+ "@vaadin/chai-plugins": "25.0.0-alpha19",
48
+ "@vaadin/test-runner-commands": "25.0.0-alpha19",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha17",
50
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha19",
51
51
  "sinon": "^21.0.0"
52
52
  },
53
53
  "web-types": [
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
57
+ "gitHead": "1f9af1ce5f0bae8daff044176c8a8df697763881"
58
58
  }
package/src/vaadin-time-picker-mixin.d.ts CHANGED
@@ -10,6 +10,7 @@ import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
10
10
  import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
11
11
  import type { ComboBoxBaseMixinClass } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
12
12
  import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
13
+ import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
13
14
  import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
14
15
  import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
15
16
  import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
@@ -22,8 +23,9 @@ import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.j
22
23
  import type { TimePickerTime } from './vaadin-time-picker-helper.js';
23
24
 
24
25
  export interface TimePickerI18n {
25
- parseTime(time: string): TimePickerTime | undefined;
26
- formatTime(time: TimePickerTime | undefined): string;
26
+ parseTime?(time: string): TimePickerTime | undefined;
27
+
28
+ formatTime?(time: TimePickerTime | undefined): string;
27
29
  }
28
30
 
29
31
  /**
@@ -38,6 +40,7 @@ export declare function TimePickerMixin<T extends Constructor<HTMLElement>>(
38
40
  Constructor<DisabledMixinClass> &
39
41
  Constructor<FieldMixinClass> &
40
42
  Constructor<FocusMixinClass> &
43
+ Constructor<I18nMixinClass<TimePickerI18n>> &
41
44
  Constructor<InputConstraintsMixinClass> &
42
45
  Constructor<InputControlMixinClass> &
43
46
  Constructor<InputMixinClass> &
@@ -99,13 +102,13 @@ export declare class TimePickerMixinClass {
99
102
  step: number | null | undefined;
100
103
 
101
104
  /**
102
- * The object used to localize this component.
103
- * To change the default localization, replace the entire
104
- * _i18n_ object or just the property you want to modify.
105
+ * The object used to localize this component. To change the default
106
+ * localization, replace this with an object that provides both the
107
+ * time parsing and formatting functions.
105
108
  *
106
109
  * The object has the following JSON structure:
107
110
  *
108
- * ```
111
+ * ```js
109
112
  * {
110
113
  * // A function to format given `Object` as
111
114
  * // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
@@ -124,8 +127,8 @@ export declare class TimePickerMixinClass {
124
127
  * }
125
128
  * ```
126
129
  *
127
- * Both `formatTime` and `parseTime` need to be implemented
128
- * to ensure the component works properly.
130
+ * NOTE: `formatTime` and `parseTime` must be implemented in a
131
+ * compatible manner to ensure the component works properly.
129
132
  */
130
133
  i18n: TimePickerI18n;
131
134
  }
package/src/vaadin-time-picker-mixin.js CHANGED
@@ -4,6 +4,7 @@
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { ComboBoxBaseMixin } from '@vaadin/combo-box/src/vaadin-combo-box-base-mixin.js';
7
+ import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
7
8
  import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
8
9
  import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
9
10
  import { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -24,11 +25,15 @@ const MAX_ALLOWED_TIME = '23:59:59.999';
24
25
  *
25
26
  * @polymerMixin
26
27
  * @mixes ComboBoxBaseMixin
28
+ * @mixes I18nMixin
27
29
  * @mixes InputControlMixin
28
30
  * @mixes PatternMixin
29
31
  */
30
32
  export const TimePickerMixin = (superClass) =>
31
- class TimePickerMixinClass extends PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))) {
33
+ class TimePickerMixinClass extends I18nMixin(
34
+ timePickerI18nDefaults,
35
+ PatternMixin(ComboBoxBaseMixin(InputControlMixin(superClass))),
36
+ ) {
32
37
  static get properties() {
33
38
  return {
34
39
  /**
@@ -98,43 +103,6 @@ export const TimePickerMixin = (superClass) =>
98
103
  sync: true,
99
104
  },
100
105
 
101
- /**
102
- * The object used to localize this component.
103
- * To change the default localization, replace the entire
104
- * _i18n_ object or just the property you want to modify.
105
- *
106
- * The object has the following JSON structure:
107
- *
108
- * ```
109
- * {
110
- * // A function to format given `Object` as
111
- * // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
112
- * formatTime: (time) => {
113
- * // returns a string representation of the given
114
- * // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
115
- * },
116
- *
117
- * // A function to parse the given text to an `Object` in the format
118
- * // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
119
- * // Must properly parse (at least) text
120
- * // formatted by `formatTime`.
121
- * parseTime: text => {
122
- * // Parses a string in object/string that can be formatted by`formatTime`.
123
- * }
124
- * }
125
- * ```
126
- *
127
- * Both `formatTime` and `parseTime` need to be implemented
128
- * to ensure the component works properly.
129
- *
130
- * @type {!TimePickerI18n}
131
- */
132
- i18n: {
133
- type: Object,
134
- sync: true,
135
- value: () => ({ ...timePickerI18nDefaults }),
136
- },
137
-
138
106
  /** @private */
139
107
  _comboBoxValue: {
140
108
  type: String,
@@ -154,7 +122,7 @@ export const TimePickerMixin = (superClass) =>
154
122
  '_openedOrItemsChanged(opened, _dropdownItems)',
155
123
  '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
156
124
  '__updateAriaAttributes(_dropdownItems, opened, inputElement)',
157
- '__updateDropdownItems(i18n, min, max, step)',
125
+ '__updateDropdownItems(__effectiveI18n, min, max, step)',
158
126
  ];
159
127
  }
160
128
 
@@ -180,6 +148,45 @@ export const TimePickerMixin = (superClass) =>
180
148
  return this.$.clearButton;
181
149
  }
182
150
 
151
+ /**
152
+ * The object used to localize this component. To change the default
153
+ * localization, replace this with an object that provides both the
154
+ * time parsing and formatting functions.
155
+ *
156
+ * The object has the following JSON structure:
157
+ *
158
+ * ```js
159
+ * {
160
+ * // A function to format given `Object` as
161
+ * // time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
162
+ * formatTime: (time) => {
163
+ * // returns a string representation of the given
164
+ * // object in `hh` / 'hh:mm' / 'hh:mm:ss' / 'hh:mm:ss.fff' - formats
165
+ * },
166
+ *
167
+ * // A function to parse the given text to an `Object` in the format
168
+ * // `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`.
169
+ * // Must properly parse (at least) text
170
+ * // formatted by `formatTime`.
171
+ * parseTime: text => {
172
+ * // Parses a string in object/string that can be formatted by`formatTime`.
173
+ * }
174
+ * }
175
+ * ```
176
+ *
177
+ * NOTE: `formatTime` and `parseTime` must be implemented in a
178
+ * compatible manner to ensure the component works properly.
179
+ *
180
+ * @return {!TimePickerI18n}
181
+ */
182
+ get i18n() {
183
+ return super.i18n;
184
+ }
185
+
186
+ set i18n(value) {
187
+ super.i18n = value;
188
+ }
189
+
183
190
  /**
184
191
  * The input element's value when it cannot be parsed as a time, and an empty string otherwise.
185
192
  *
@@ -187,7 +194,7 @@ export const TimePickerMixin = (superClass) =>
187
194
  * @return {string}
188
195
  */
189
196
  get __unparsableValue() {
190
- if (this._inputElementValue && !this.i18n.parseTime(this._inputElementValue)) {
197
+ if (this._inputElementValue && !this.__effectiveI18n.parseTime(this._inputElementValue)) {
191
198
  return this._inputElementValue;
192
199
  }
193
200
 
@@ -245,8 +252,8 @@ export const TimePickerMixin = (superClass) =>
245
252
  checkValidity() {
246
253
  return !!(
247
254
  this.inputElement.checkValidity() &&
248
- (!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
249
- (!this._comboBoxValue || this.i18n.parseTime(this._comboBoxValue))
255
+ (!this.value || this._timeAllowed(this.__effectiveI18n.parseTime(this.value))) &&
256
+ (!this._comboBoxValue || this.__effectiveI18n.parseTime(this._comboBoxValue))
250
257
  );
251
258
  }
252
259
 
@@ -411,7 +418,7 @@ export const TimePickerMixin = (superClass) =>
411
418
  // observer where the value can be parsed again, so we set
412
419
  // this flag to ensure it does not alter the value.
413
420
  this.__useMemo = true;
414
- this._comboBoxValue = this.i18n.formatTime(objWithStep);
421
+ this._comboBoxValue = this.__effectiveI18n.formatTime(objWithStep);
415
422
  this.__useMemo = false;
416
423
 
417
424
  this.__commitValueChange();
@@ -508,7 +515,7 @@ export const TimePickerMixin = (superClass) =>
508
515
  }
509
516
 
510
517
  /** @private */
511
- __updateDropdownItems(i18n, min, max, step) {
518
+ __updateDropdownItems(effectiveI18n, min, max, step) {
512
519
  const minTimeObj = validateTime(parseISOTime(min || MIN_ALLOWED_TIME), step);
513
520
  const minSec = this.__getSec(minTimeObj);
514
521
 
@@ -524,7 +531,7 @@ export const TimePickerMixin = (superClass) =>
524
531
  }
525
532
 
526
533
  if (this.value) {
527
- this._comboBoxValue = i18n.formatTime(i18n.parseTime(this.value));
534
+ this._comboBoxValue = effectiveI18n.formatTime(effectiveI18n.parseTime(this.value));
528
535
  }
529
536
  }
530
537
 
@@ -560,7 +567,7 @@ export const TimePickerMixin = (superClass) =>
560
567
  while (time + step >= minSec && time + step <= maxSec) {
561
568
  const timeObj = validateTime(this.__addStep(time * 1000, step), step);
562
569
  time += step;
563
- const formatted = this.i18n.formatTime(timeObj);
570
+ const formatted = this.__effectiveI18n.formatTime(timeObj);
564
571
  generatedList.push({ label: formatted, value: formatted });
565
572
  }
566
573
 
@@ -606,8 +613,8 @@ export const TimePickerMixin = (superClass) =>
606
613
  return;
607
614
  }
608
615
 
609
- const parsedObj = this.__useMemo ? this.__memoValue : this.i18n.parseTime(value);
610
- const newValue = this.i18n.formatTime(parsedObj) || '';
616
+ const parsedObj = this.__useMemo ? this.__memoValue : this.__effectiveI18n.parseTime(value);
617
+ const newValue = this.__effectiveI18n.formatTime(parsedObj) || '';
611
618
 
612
619
  if (parsedObj) {
613
620
  if (value !== newValue) {
@@ -644,7 +651,7 @@ export const TimePickerMixin = (superClass) =>
644
651
 
645
652
  /** @private */
646
653
  __updateInputValue(obj) {
647
- const timeString = this.i18n.formatTime(validateTime(obj, this.step)) || '';
654
+ const timeString = this.__effectiveI18n.formatTime(validateTime(obj, this.step)) || '';
648
655
  this._inputElementValue = timeString;
649
656
  this._comboBoxValue = timeString;
650
657
  }
@@ -657,8 +664,8 @@ export const TimePickerMixin = (superClass) =>
657
664
  * @protected
658
665
  */
659
666
  _timeAllowed(time) {
660
- const parsedMin = this.i18n.parseTime(this.min || MIN_ALLOWED_TIME);
661
- const parsedMax = this.i18n.parseTime(this.max || MAX_ALLOWED_TIME);
667
+ const parsedMin = this.__effectiveI18n.parseTime(this.min || MIN_ALLOWED_TIME);
668
+ const parsedMax = this.__effectiveI18n.parseTime(this.max || MAX_ALLOWED_TIME);
662
669
 
663
670
  return (
664
671
  (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
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.0.0-alpha17",
4
+ "version": "25.0.0-alpha19",
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`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.0.0-alpha17/#/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 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`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.0.0-alpha19/#/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": "disabled",
@@ -61,6 +61,15 @@
61
61
  ]
62
62
  }
63
63
  },
64
+ {
65
+ "name": "i18n",
66
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
67
+ "value": {
68
+ "type": [
69
+ "Object"
70
+ ]
71
+ }
72
+ },
64
73
  {
65
74
  "name": "autofocus",
66
75
  "description": "Specify that this control should have input focus when the page loads.",
@@ -331,6 +340,15 @@
331
340
  ]
332
341
  }
333
342
  },
343
+ {
344
+ "name": "i18n",
345
+ "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.",
346
+ "value": {
347
+ "type": [
348
+ "TimePickerI18n"
349
+ ]
350
+ }
351
+ },
334
352
  {
335
353
  "name": "autofocus",
336
354
  "description": "Specify that this control should have input focus when the page loads.",
@@ -535,15 +553,6 @@
535
553
  "undefined"
536
554
  ]
537
555
  }
538
- },
539
- {
540
- "name": "i18n",
541
- "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\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\nBoth `formatTime` and `parseTime` need to be implemented\nto ensure the component works properly.",
542
- "value": {
543
- "type": [
544
- "TimePickerI18n"
545
- ]
546
- }
547
556
  }
548
557
  ],
549
558
  "events": [
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.0.0-alpha17",
4
+ "version": "25.0.0-alpha19",
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`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.0.0-alpha17/#/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 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`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.0.0-alpha19/#/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
  {
@@ -96,6 +96,13 @@
96
96
  "kind": "expression"
97
97
  }
98
98
  },
99
+ {
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.",
102
+ "value": {
103
+ "kind": "expression"
104
+ }
105
+ },
99
106
  {
100
107
  "name": ".label",
101
108
  "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
@@ -187,13 +194,6 @@
187
194
  "kind": "expression"
188
195
  }
189
196
  },
190
- {
191
- "name": ".i18n",
192
- "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure:\n\n```\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\nBoth `formatTime` and `parseTime` need to be implemented\nto ensure the component works properly.",
193
- "value": {
194
- "kind": "expression"
195
- }
196
- },
197
197
  {
198
198
  "name": "@validated",
199
199
  "description": "Fired whenever the field is validated.",