@vaadin/time-picker 23.2.0-dev.8a7678b70 → 23.2.1
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/README.md +4 -4
- package/package.json +16 -10
- package/src/vaadin-time-picker-combo-box.js +0 -1
- package/src/vaadin-time-picker-item.js +1 -1
- package/src/vaadin-time-picker.d.ts +15 -18
- package/src/vaadin-time-picker.js +32 -13
- package/web-types.json +514 -0
- package/web-types.lit.json +216 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A web component that allows to enter a time, either by typing, or by selecting from a set of pre-defined options.
|
|
4
4
|
|
|
5
|
-
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/
|
|
5
|
+
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/time-picker)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/time-picker)
|
|
8
8
|
[](https://discord.gg/PHmkCKC)
|
|
@@ -11,7 +11,7 @@ A web component that allows to enter a time, either by typing, or by selecting f
|
|
|
11
11
|
<vaadin-time-picker label="Delivery Time"></vaadin-time-picker>
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/time-picker/screenshot.png" width="215" alt="Screenshot of vaadin-time-picker">](https://vaadin.com/docs/latest/
|
|
14
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/time-picker/screenshot.png" width="215" alt="Screenshot of vaadin-time-picker">](https://vaadin.com/docs/latest/components/time-picker)
|
|
15
15
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
@@ -29,7 +29,7 @@ import '@vaadin/time-picker';
|
|
|
29
29
|
|
|
30
30
|
## Themes
|
|
31
31
|
|
|
32
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/
|
|
32
|
+
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
33
33
|
The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/time-picker/vaadin-time-picker.js) of the package uses the Lumo theme.
|
|
34
34
|
|
|
35
35
|
To use the Material theme, import the component from the `theme/material` folder:
|
|
@@ -52,7 +52,7 @@ import '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
|
52
52
|
|
|
53
53
|
## Contributing
|
|
54
54
|
|
|
55
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/
|
|
55
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
56
56
|
|
|
57
57
|
## License
|
|
58
58
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "23.2.
|
|
3
|
+
"version": "23.2.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
"src",
|
|
24
24
|
"theme",
|
|
25
25
|
"vaadin-*.d.ts",
|
|
26
|
-
"vaadin-*.js"
|
|
26
|
+
"vaadin-*.js",
|
|
27
|
+
"web-types.json",
|
|
28
|
+
"web-types.lit.json"
|
|
27
29
|
],
|
|
28
30
|
"keywords": [
|
|
29
31
|
"Vaadin",
|
|
@@ -34,18 +36,22 @@
|
|
|
34
36
|
],
|
|
35
37
|
"dependencies": {
|
|
36
38
|
"@polymer/polymer": "^3.0.0",
|
|
37
|
-
"@vaadin/combo-box": "23.2.
|
|
38
|
-
"@vaadin/component-base": "23.2.
|
|
39
|
-
"@vaadin/field-base": "23.2.
|
|
40
|
-
"@vaadin/input-container": "23.2.
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "23.2.
|
|
42
|
-
"@vaadin/vaadin-material-styles": "23.2.
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "23.2.
|
|
39
|
+
"@vaadin/combo-box": "~23.2.1",
|
|
40
|
+
"@vaadin/component-base": "~23.2.1",
|
|
41
|
+
"@vaadin/field-base": "~23.2.1",
|
|
42
|
+
"@vaadin/input-container": "~23.2.1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "~23.2.1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "~23.2.1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "~23.2.1"
|
|
44
46
|
},
|
|
45
47
|
"devDependencies": {
|
|
46
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
47
49
|
"@vaadin/testing-helpers": "^0.3.2",
|
|
48
50
|
"sinon": "^13.0.2"
|
|
49
51
|
},
|
|
50
|
-
"
|
|
52
|
+
"web-types": [
|
|
53
|
+
"web-types.json",
|
|
54
|
+
"web-types.lit.json"
|
|
55
|
+
],
|
|
56
|
+
"gitHead": "a6c314f6927bfd3309fc735eae6c6dc72ab8367a"
|
|
51
57
|
}
|
|
@@ -35,7 +35,6 @@ class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolymerElement)) {
|
|
|
35
35
|
|
|
36
36
|
<vaadin-time-picker-overlay
|
|
37
37
|
id="overlay"
|
|
38
|
-
hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
|
|
39
38
|
opened="[[_overlayOpened]]"
|
|
40
39
|
loading$="[[loading]]"
|
|
41
40
|
theme$="[[_theme]]"
|
|
@@ -23,7 +23,7 @@ import { ComboBoxItem } from '@vaadin/combo-box/src/vaadin-combo-box-item.js';
|
|
|
23
23
|
* `selected` | Set when the item is selected | :host
|
|
24
24
|
* `focused` | Set when the item is focused | :host
|
|
25
25
|
*
|
|
26
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
26
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
27
27
|
*
|
|
28
28
|
* @extends ComboBoxItem
|
|
29
29
|
* @private
|
|
@@ -9,10 +9,10 @@ import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
|
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
10
|
|
|
11
11
|
export interface TimePickerTime {
|
|
12
|
-
hours:
|
|
13
|
-
minutes:
|
|
14
|
-
seconds?:
|
|
15
|
-
milliseconds?:
|
|
12
|
+
hours: number | string;
|
|
13
|
+
minutes: number | string;
|
|
14
|
+
seconds?: number | string;
|
|
15
|
+
milliseconds?: number | string;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export interface TimePickerI18n {
|
|
@@ -39,10 +39,17 @@ export type TimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
|
39
39
|
*/
|
|
40
40
|
export type TimePickerValueChangedEvent = CustomEvent<{ value: string }>;
|
|
41
41
|
|
|
42
|
+
/**
|
|
43
|
+
* Fired whenever the field is validated.
|
|
44
|
+
*/
|
|
45
|
+
export type TimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
46
|
+
|
|
42
47
|
export interface TimePickerCustomEventMap {
|
|
43
48
|
'invalid-changed': TimePickerInvalidChangedEvent;
|
|
44
49
|
|
|
45
50
|
'value-changed': TimePickerValueChangedEvent;
|
|
51
|
+
|
|
52
|
+
validated: TimePickerValidatedEvent;
|
|
46
53
|
}
|
|
47
54
|
|
|
48
55
|
export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCustomEventMap {
|
|
@@ -92,11 +99,12 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
92
99
|
* Note: the `theme` attribute value set on `<vaadin-time-picker>` is
|
|
93
100
|
* propagated to the internal components listed above.
|
|
94
101
|
*
|
|
95
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
102
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
96
103
|
*
|
|
97
104
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
98
105
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
99
106
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
107
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
100
108
|
*/
|
|
101
109
|
declare class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
|
|
102
110
|
/**
|
|
@@ -184,27 +192,16 @@ declare class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(El
|
|
|
184
192
|
*/
|
|
185
193
|
i18n: TimePickerI18n;
|
|
186
194
|
|
|
187
|
-
/**
|
|
188
|
-
* Returns true if `value` is valid, and sets the `invalid` flag appropriately.
|
|
189
|
-
*/
|
|
190
|
-
validate(): boolean;
|
|
191
|
-
|
|
192
|
-
/**
|
|
193
|
-
* Returns true if the current input value satisfies all constraints (if any).
|
|
194
|
-
* You can override this method for custom validations.
|
|
195
|
-
*/
|
|
196
|
-
checkValidity(): boolean;
|
|
197
|
-
|
|
198
195
|
addEventListener<K extends keyof TimePickerEventMap>(
|
|
199
196
|
type: K,
|
|
200
197
|
listener: (this: TimePicker, ev: TimePickerEventMap[K]) => void,
|
|
201
|
-
options?:
|
|
198
|
+
options?: AddEventListenerOptions | boolean,
|
|
202
199
|
): void;
|
|
203
200
|
|
|
204
201
|
removeEventListener<K extends keyof TimePickerEventMap>(
|
|
205
202
|
type: K,
|
|
206
203
|
listener: (this: TimePicker, ev: TimePickerEventMap[K]) => void,
|
|
207
|
-
options?:
|
|
204
|
+
options?: EventListenerOptions | boolean,
|
|
208
205
|
): void;
|
|
209
206
|
}
|
|
210
207
|
|
|
@@ -14,6 +14,9 @@ import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
|
|
|
14
14
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
15
15
|
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
16
16
|
|
|
17
|
+
const MIN_ALLOWED_TIME = '00:00:00.000';
|
|
18
|
+
const MAX_ALLOWED_TIME = '23:59:59.999';
|
|
19
|
+
|
|
17
20
|
registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-picker-styles' });
|
|
18
21
|
|
|
19
22
|
/**
|
|
@@ -59,11 +62,12 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
|
|
|
59
62
|
* Note: the `theme` attribute value set on `<vaadin-time-picker>` is
|
|
60
63
|
* propagated to the internal components listed above.
|
|
61
64
|
*
|
|
62
|
-
* See [Styling Components](https://vaadin.com/docs/latest/
|
|
65
|
+
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
63
66
|
*
|
|
64
67
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
65
68
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
66
69
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
70
|
+
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
67
71
|
*
|
|
68
72
|
* @extends HTMLElement
|
|
69
73
|
* @mixes ElementMixin
|
|
@@ -110,7 +114,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
110
114
|
auto-open-disabled="[[autoOpenDisabled]]"
|
|
111
115
|
position-target="[[_inputContainer]]"
|
|
112
116
|
theme$="[[_theme]]"
|
|
113
|
-
on-change="
|
|
117
|
+
on-change="__onComboBoxChange"
|
|
114
118
|
>
|
|
115
119
|
<vaadin-input-container
|
|
116
120
|
part="input-field"
|
|
@@ -165,7 +169,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
165
169
|
*/
|
|
166
170
|
min: {
|
|
167
171
|
type: String,
|
|
168
|
-
value: '
|
|
172
|
+
value: '',
|
|
169
173
|
},
|
|
170
174
|
|
|
171
175
|
/**
|
|
@@ -179,7 +183,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
179
183
|
*/
|
|
180
184
|
max: {
|
|
181
185
|
type: String,
|
|
182
|
-
value: '
|
|
186
|
+
value: '',
|
|
183
187
|
},
|
|
184
188
|
|
|
185
189
|
/**
|
|
@@ -304,6 +308,10 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
304
308
|
return ['__updateDropdownItems(i18n.*, min, max, step)'];
|
|
305
309
|
}
|
|
306
310
|
|
|
311
|
+
static get constraints() {
|
|
312
|
+
return [...super.constraints, 'min', 'max'];
|
|
313
|
+
}
|
|
314
|
+
|
|
307
315
|
/**
|
|
308
316
|
* Used by `InputControlMixin` as a reference to the clear button element.
|
|
309
317
|
* @protected
|
|
@@ -480,10 +488,10 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
480
488
|
|
|
481
489
|
/** @private */
|
|
482
490
|
__updateDropdownItems(i8n, min, max, step) {
|
|
483
|
-
const minTimeObj = this.__validateTime(this.__parseISO(min));
|
|
491
|
+
const minTimeObj = this.__validateTime(this.__parseISO(min || MIN_ALLOWED_TIME));
|
|
484
492
|
const minSec = this.__getSec(minTimeObj);
|
|
485
493
|
|
|
486
|
-
const maxTimeObj = this.__validateTime(this.__parseISO(max));
|
|
494
|
+
const maxTimeObj = this.__validateTime(this.__parseISO(max || MAX_ALLOWED_TIME));
|
|
487
495
|
const maxSec = this.__getSec(maxTimeObj);
|
|
488
496
|
|
|
489
497
|
this.__adjustValue(minSec, maxSec, minTimeObj, maxTimeObj);
|
|
@@ -548,15 +556,21 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
548
556
|
const parsedObj = (this.__memoValue = this.__parseISO(value));
|
|
549
557
|
const newValue = this.__formatISO(parsedObj) || '';
|
|
550
558
|
|
|
551
|
-
if (
|
|
552
|
-
|
|
553
|
-
|
|
559
|
+
if (value !== '' && value !== null && !parsedObj) {
|
|
560
|
+
// Value can not be parsed, reset to the old one.
|
|
561
|
+
this.value = oldValue === undefined ? '' : oldValue;
|
|
562
|
+
} else if (value !== newValue) {
|
|
563
|
+
// Value can be parsed (e.g. 12 -> 12:00), adjust.
|
|
554
564
|
this.value = newValue;
|
|
565
|
+
} else if (this.__keepInvalidInput) {
|
|
566
|
+
// User input could not be parsed and was reset
|
|
567
|
+
// to empty string, do not update input value.
|
|
568
|
+
delete this.__keepInvalidInput;
|
|
555
569
|
} else {
|
|
556
570
|
this.__updateInputValue(parsedObj);
|
|
557
571
|
}
|
|
558
572
|
|
|
559
|
-
this._toggleHasValue(
|
|
573
|
+
this._toggleHasValue(this._hasValue);
|
|
560
574
|
}
|
|
561
575
|
|
|
562
576
|
/** @private */
|
|
@@ -575,12 +589,17 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
575
589
|
this.__updateValue(parsedObj);
|
|
576
590
|
}
|
|
577
591
|
} else {
|
|
592
|
+
// If user input can not be parsed, keep it.
|
|
593
|
+
if (value !== '') {
|
|
594
|
+
this.__keepInvalidInput = true;
|
|
595
|
+
}
|
|
596
|
+
|
|
578
597
|
this.value = '';
|
|
579
598
|
}
|
|
580
599
|
}
|
|
581
600
|
|
|
582
601
|
/** @private */
|
|
583
|
-
|
|
602
|
+
__onComboBoxChange(event) {
|
|
584
603
|
event.stopPropagation();
|
|
585
604
|
|
|
586
605
|
this.validate();
|
|
@@ -649,8 +668,8 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
649
668
|
* @protected
|
|
650
669
|
*/
|
|
651
670
|
_timeAllowed(time) {
|
|
652
|
-
const parsedMin = this.i18n.parseTime(this.min);
|
|
653
|
-
const parsedMax = this.i18n.parseTime(this.max);
|
|
671
|
+
const parsedMin = this.i18n.parseTime(this.min || MIN_ALLOWED_TIME);
|
|
672
|
+
const parsedMax = this.i18n.parseTime(this.max || MAX_ALLOWED_TIME);
|
|
654
673
|
|
|
655
674
|
return (
|
|
656
675
|
(!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
|
package/web-types.json
ADDED
|
@@ -0,0 +1,514 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/time-picker",
|
|
4
|
+
"version": "23.2.1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"contributions": {
|
|
7
|
+
"html": {
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-time-picker",
|
|
11
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "disabled",
|
|
15
|
+
"description": "If true, the user cannot interact with this element.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"boolean",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "autofocus",
|
|
26
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "label",
|
|
37
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"string",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "invalid",
|
|
48
|
+
"description": "Set to true when the field is invalid.",
|
|
49
|
+
"value": {
|
|
50
|
+
"type": [
|
|
51
|
+
"boolean",
|
|
52
|
+
"null",
|
|
53
|
+
"undefined"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "required",
|
|
59
|
+
"description": "Specifies that the user must fill in a value.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"boolean",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "error-message",
|
|
70
|
+
"description": "Error to show when the field is invalid.",
|
|
71
|
+
"value": {
|
|
72
|
+
"type": [
|
|
73
|
+
"string",
|
|
74
|
+
"null",
|
|
75
|
+
"undefined"
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "helper-text",
|
|
81
|
+
"description": "String used for the helper text.",
|
|
82
|
+
"value": {
|
|
83
|
+
"type": [
|
|
84
|
+
"string",
|
|
85
|
+
"null",
|
|
86
|
+
"undefined"
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "value",
|
|
92
|
+
"description": "The time value for this element.\n\nSupported time formats are in ISO 8601:\n- `hh:mm` (default)\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
93
|
+
"value": {
|
|
94
|
+
"type": [
|
|
95
|
+
"string"
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "allowed-char-pattern",
|
|
101
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
102
|
+
"value": {
|
|
103
|
+
"type": [
|
|
104
|
+
"string",
|
|
105
|
+
"null",
|
|
106
|
+
"undefined"
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"name": "autoselect",
|
|
112
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
113
|
+
"value": {
|
|
114
|
+
"type": [
|
|
115
|
+
"boolean",
|
|
116
|
+
"null",
|
|
117
|
+
"undefined"
|
|
118
|
+
]
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "clear-button-visible",
|
|
123
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
124
|
+
"value": {
|
|
125
|
+
"type": [
|
|
126
|
+
"boolean",
|
|
127
|
+
"null",
|
|
128
|
+
"undefined"
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"name": "name",
|
|
134
|
+
"description": "The name of this field.",
|
|
135
|
+
"value": {
|
|
136
|
+
"type": [
|
|
137
|
+
"string",
|
|
138
|
+
"null",
|
|
139
|
+
"undefined"
|
|
140
|
+
]
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"name": "placeholder",
|
|
145
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
146
|
+
"value": {
|
|
147
|
+
"type": [
|
|
148
|
+
"string",
|
|
149
|
+
"null",
|
|
150
|
+
"undefined"
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"name": "readonly",
|
|
156
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
157
|
+
"value": {
|
|
158
|
+
"type": [
|
|
159
|
+
"boolean",
|
|
160
|
+
"null",
|
|
161
|
+
"undefined"
|
|
162
|
+
]
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"name": "title",
|
|
167
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
168
|
+
"value": {
|
|
169
|
+
"type": [
|
|
170
|
+
"string",
|
|
171
|
+
"null",
|
|
172
|
+
"undefined"
|
|
173
|
+
]
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "pattern",
|
|
178
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
179
|
+
"value": {
|
|
180
|
+
"type": [
|
|
181
|
+
"string",
|
|
182
|
+
"null",
|
|
183
|
+
"undefined"
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"name": "prevent-invalid-input",
|
|
189
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
190
|
+
"value": {
|
|
191
|
+
"type": [
|
|
192
|
+
"boolean",
|
|
193
|
+
"null",
|
|
194
|
+
"undefined"
|
|
195
|
+
]
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "min",
|
|
200
|
+
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
201
|
+
"value": {
|
|
202
|
+
"type": [
|
|
203
|
+
"string"
|
|
204
|
+
]
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"name": "max",
|
|
209
|
+
"description": "Maximum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
210
|
+
"value": {
|
|
211
|
+
"type": [
|
|
212
|
+
"string"
|
|
213
|
+
]
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "step",
|
|
218
|
+
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the value string. By default\nthe component formats values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX experience.",
|
|
219
|
+
"value": {
|
|
220
|
+
"type": [
|
|
221
|
+
"number",
|
|
222
|
+
"null",
|
|
223
|
+
"undefined"
|
|
224
|
+
]
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "auto-open-disabled",
|
|
229
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
230
|
+
"value": {
|
|
231
|
+
"type": [
|
|
232
|
+
"boolean",
|
|
233
|
+
"null",
|
|
234
|
+
"undefined"
|
|
235
|
+
]
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"name": "theme",
|
|
240
|
+
"description": "The theme variants to apply to the component.",
|
|
241
|
+
"value": {
|
|
242
|
+
"type": [
|
|
243
|
+
"string",
|
|
244
|
+
"null",
|
|
245
|
+
"undefined"
|
|
246
|
+
]
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
],
|
|
250
|
+
"js": {
|
|
251
|
+
"properties": [
|
|
252
|
+
{
|
|
253
|
+
"name": "disabled",
|
|
254
|
+
"description": "If true, the user cannot interact with this element.",
|
|
255
|
+
"value": {
|
|
256
|
+
"type": [
|
|
257
|
+
"boolean",
|
|
258
|
+
"null",
|
|
259
|
+
"undefined"
|
|
260
|
+
]
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
"name": "autofocus",
|
|
265
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
266
|
+
"value": {
|
|
267
|
+
"type": [
|
|
268
|
+
"boolean",
|
|
269
|
+
"null",
|
|
270
|
+
"undefined"
|
|
271
|
+
]
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "label",
|
|
276
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
277
|
+
"value": {
|
|
278
|
+
"type": [
|
|
279
|
+
"string",
|
|
280
|
+
"null",
|
|
281
|
+
"undefined"
|
|
282
|
+
]
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"name": "invalid",
|
|
287
|
+
"description": "Set to true when the field is invalid.",
|
|
288
|
+
"value": {
|
|
289
|
+
"type": [
|
|
290
|
+
"boolean",
|
|
291
|
+
"null",
|
|
292
|
+
"undefined"
|
|
293
|
+
]
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
"name": "required",
|
|
298
|
+
"description": "Specifies that the user must fill in a value.",
|
|
299
|
+
"value": {
|
|
300
|
+
"type": [
|
|
301
|
+
"boolean",
|
|
302
|
+
"null",
|
|
303
|
+
"undefined"
|
|
304
|
+
]
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"name": "errorMessage",
|
|
309
|
+
"description": "Error to show when the field is invalid.",
|
|
310
|
+
"value": {
|
|
311
|
+
"type": [
|
|
312
|
+
"string",
|
|
313
|
+
"null",
|
|
314
|
+
"undefined"
|
|
315
|
+
]
|
|
316
|
+
}
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
"name": "helperText",
|
|
320
|
+
"description": "String used for the helper text.",
|
|
321
|
+
"value": {
|
|
322
|
+
"type": [
|
|
323
|
+
"string",
|
|
324
|
+
"null",
|
|
325
|
+
"undefined"
|
|
326
|
+
]
|
|
327
|
+
}
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
"name": "value",
|
|
331
|
+
"description": "The time value for this element.\n\nSupported time formats are in ISO 8601:\n- `hh:mm` (default)\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
332
|
+
"value": {
|
|
333
|
+
"type": [
|
|
334
|
+
"string"
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"name": "allowedCharPattern",
|
|
340
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
341
|
+
"value": {
|
|
342
|
+
"type": [
|
|
343
|
+
"string",
|
|
344
|
+
"null",
|
|
345
|
+
"undefined"
|
|
346
|
+
]
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"name": "autoselect",
|
|
351
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
352
|
+
"value": {
|
|
353
|
+
"type": [
|
|
354
|
+
"boolean",
|
|
355
|
+
"null",
|
|
356
|
+
"undefined"
|
|
357
|
+
]
|
|
358
|
+
}
|
|
359
|
+
},
|
|
360
|
+
{
|
|
361
|
+
"name": "clearButtonVisible",
|
|
362
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
363
|
+
"value": {
|
|
364
|
+
"type": [
|
|
365
|
+
"boolean",
|
|
366
|
+
"null",
|
|
367
|
+
"undefined"
|
|
368
|
+
]
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"name": "name",
|
|
373
|
+
"description": "The name of this field.",
|
|
374
|
+
"value": {
|
|
375
|
+
"type": [
|
|
376
|
+
"string",
|
|
377
|
+
"null",
|
|
378
|
+
"undefined"
|
|
379
|
+
]
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"name": "placeholder",
|
|
384
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
385
|
+
"value": {
|
|
386
|
+
"type": [
|
|
387
|
+
"string",
|
|
388
|
+
"null",
|
|
389
|
+
"undefined"
|
|
390
|
+
]
|
|
391
|
+
}
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"name": "readonly",
|
|
395
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
396
|
+
"value": {
|
|
397
|
+
"type": [
|
|
398
|
+
"boolean",
|
|
399
|
+
"null",
|
|
400
|
+
"undefined"
|
|
401
|
+
]
|
|
402
|
+
}
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
"name": "title",
|
|
406
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
407
|
+
"value": {
|
|
408
|
+
"type": [
|
|
409
|
+
"string",
|
|
410
|
+
"null",
|
|
411
|
+
"undefined"
|
|
412
|
+
]
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"name": "pattern",
|
|
417
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
418
|
+
"value": {
|
|
419
|
+
"type": [
|
|
420
|
+
"string",
|
|
421
|
+
"null",
|
|
422
|
+
"undefined"
|
|
423
|
+
]
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"name": "preventInvalidInput",
|
|
428
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
429
|
+
"value": {
|
|
430
|
+
"type": [
|
|
431
|
+
"boolean",
|
|
432
|
+
"null",
|
|
433
|
+
"undefined"
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"name": "min",
|
|
439
|
+
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
440
|
+
"value": {
|
|
441
|
+
"type": [
|
|
442
|
+
"string"
|
|
443
|
+
]
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"name": "max",
|
|
448
|
+
"description": "Maximum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
449
|
+
"value": {
|
|
450
|
+
"type": [
|
|
451
|
+
"string"
|
|
452
|
+
]
|
|
453
|
+
}
|
|
454
|
+
},
|
|
455
|
+
{
|
|
456
|
+
"name": "step",
|
|
457
|
+
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the value string. By default\nthe component formats values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX experience.",
|
|
458
|
+
"value": {
|
|
459
|
+
"type": [
|
|
460
|
+
"number",
|
|
461
|
+
"null",
|
|
462
|
+
"undefined"
|
|
463
|
+
]
|
|
464
|
+
}
|
|
465
|
+
},
|
|
466
|
+
{
|
|
467
|
+
"name": "autoOpenDisabled",
|
|
468
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
469
|
+
"value": {
|
|
470
|
+
"type": [
|
|
471
|
+
"boolean",
|
|
472
|
+
"null",
|
|
473
|
+
"undefined"
|
|
474
|
+
]
|
|
475
|
+
}
|
|
476
|
+
},
|
|
477
|
+
{
|
|
478
|
+
"name": "i18n",
|
|
479
|
+
"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.",
|
|
480
|
+
"value": {
|
|
481
|
+
"type": [
|
|
482
|
+
"TimePickerI18n"
|
|
483
|
+
]
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
],
|
|
487
|
+
"events": [
|
|
488
|
+
{
|
|
489
|
+
"name": "validated",
|
|
490
|
+
"description": "Fired whenever the field is validated."
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
"name": "change",
|
|
494
|
+
"description": "Fired when the user commits a value change."
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
"name": "input",
|
|
498
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"name": "value-changed",
|
|
502
|
+
"description": "Fired when the `value` property changes."
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"name": "invalid-changed",
|
|
506
|
+
"description": "Fired when the `invalid` property changes."
|
|
507
|
+
}
|
|
508
|
+
]
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
]
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
}
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/time-picker",
|
|
4
|
+
"version": "23.2.1",
|
|
5
|
+
"description-markup": "markdown",
|
|
6
|
+
"framework": "lit",
|
|
7
|
+
"framework-config": {
|
|
8
|
+
"enable-when": {
|
|
9
|
+
"node-packages": [
|
|
10
|
+
"lit"
|
|
11
|
+
]
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"contributions": {
|
|
15
|
+
"html": {
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-time-picker",
|
|
19
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?autofocus",
|
|
31
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?invalid",
|
|
38
|
+
"description": "Set to true when the field is invalid.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?required",
|
|
45
|
+
"description": "Specifies that the user must fill in a value.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": "?autoselect",
|
|
52
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?clearButtonVisible",
|
|
59
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "?readonly",
|
|
66
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "?preventInvalidInput",
|
|
73
|
+
"description": "When set to true, user is prevented from typing a value that\nconflicts with the given `pattern`.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "?autoOpenDisabled",
|
|
80
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".label",
|
|
87
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": ".errorMessage",
|
|
94
|
+
"description": "Error to show when the field is invalid.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".helperText",
|
|
101
|
+
"description": "String used for the helper text.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".value",
|
|
108
|
+
"description": "The time value for this element.\n\nSupported time formats are in ISO 8601:\n- `hh:mm` (default)\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".allowedCharPattern",
|
|
115
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": ".name",
|
|
122
|
+
"description": "The name of this field.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": ".placeholder",
|
|
129
|
+
"description": "A hint to the user of what can be entered in the field.",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".title",
|
|
136
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": ".pattern",
|
|
143
|
+
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": ".min",
|
|
150
|
+
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
151
|
+
"value": {
|
|
152
|
+
"kind": "expression"
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": ".max",
|
|
157
|
+
"description": "Maximum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
158
|
+
"value": {
|
|
159
|
+
"kind": "expression"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": ".step",
|
|
164
|
+
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the value string. By default\nthe component formats values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX experience.",
|
|
165
|
+
"value": {
|
|
166
|
+
"kind": "expression"
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": ".i18n",
|
|
171
|
+
"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.",
|
|
172
|
+
"value": {
|
|
173
|
+
"kind": "expression"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "@validated",
|
|
178
|
+
"description": "Fired whenever the field is validated.",
|
|
179
|
+
"value": {
|
|
180
|
+
"kind": "expression"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "@change",
|
|
185
|
+
"description": "Fired when the user commits a value change.",
|
|
186
|
+
"value": {
|
|
187
|
+
"kind": "expression"
|
|
188
|
+
}
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "@input",
|
|
192
|
+
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button.",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": "@value-changed",
|
|
199
|
+
"description": "Fired when the `value` property changes.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": "@invalid-changed",
|
|
206
|
+
"description": "Fired when the `invalid` property changes.",
|
|
207
|
+
"value": {
|
|
208
|
+
"kind": "expression"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
]
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|