@vaadin/time-picker 25.0.0-alpha17 → 25.0.0-alpha18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -12
- package/src/vaadin-time-picker-mixin.d.ts +10 -7
- package/src/vaadin-time-picker-mixin.js +58 -51
- package/web-types.json +20 -11
- 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-
|
|
3
|
+
"version": "25.0.0-alpha18",
|
|
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-
|
|
38
|
-
"@vaadin/component-base": "25.0.0-
|
|
39
|
-
"@vaadin/field-base": "25.0.0-
|
|
40
|
-
"@vaadin/input-container": "25.0.0-
|
|
41
|
-
"@vaadin/item": "25.0.0-
|
|
42
|
-
"@vaadin/overlay": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
37
|
+
"@vaadin/combo-box": "25.0.0-alpha18",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha18",
|
|
39
|
+
"@vaadin/field-base": "25.0.0-alpha18",
|
|
40
|
+
"@vaadin/input-container": "25.0.0-alpha18",
|
|
41
|
+
"@vaadin/item": "25.0.0-alpha18",
|
|
42
|
+
"@vaadin/overlay": "25.0.0-alpha18",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha18",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
47
|
+
"@vaadin/chai-plugins": "25.0.0-alpha18",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha18",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha18",
|
|
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": "
|
|
57
|
+
"gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
|
|
58
58
|
}
|
|
@@ -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
|
-
|
|
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,9 +102,9 @@ export declare class TimePickerMixinClass {
|
|
|
99
102
|
step: number | null | undefined;
|
|
100
103
|
|
|
101
104
|
/**
|
|
102
|
-
* The object used to localize this component.
|
|
103
|
-
*
|
|
104
|
-
*
|
|
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
|
*
|
|
@@ -124,8 +127,8 @@ export declare class TimePickerMixinClass {
|
|
|
124
127
|
* }
|
|
125
128
|
* ```
|
|
126
129
|
*
|
|
127
|
-
*
|
|
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
|
}
|
|
@@ -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
|
|
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(
|
|
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
|
+
* ```
|
|
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.
|
|
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.
|
|
249
|
-
(!this._comboBoxValue || this.
|
|
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.
|
|
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(
|
|
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 =
|
|
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.
|
|
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.
|
|
610
|
-
const newValue = this.
|
|
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.
|
|
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.
|
|
661
|
-
const parsedMax = this.
|
|
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-
|
|
4
|
+
"version": "25.0.0-alpha18",
|
|
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-
|
|
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-alpha18/#/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```\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-
|
|
4
|
+
"version": "25.0.0-alpha18",
|
|
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-
|
|
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-alpha18/#/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```\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.",
|