@vaadin/time-picker 23.2.2 → 23.3.0-alpha2
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 +9 -9
- package/src/vaadin-time-picker.d.ts +29 -2
- package/src/vaadin-time-picker.js +41 -0
- package/web-types.json +28 -2
- package/web-types.lit.json +16 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.3.0-alpha2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/combo-box": "
|
|
40
|
-
"@vaadin/component-base": "
|
|
41
|
-
"@vaadin/field-base": "
|
|
42
|
-
"@vaadin/input-container": "
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
44
|
-
"@vaadin/vaadin-material-styles": "
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
39
|
+
"@vaadin/combo-box": "23.3.0-alpha2",
|
|
40
|
+
"@vaadin/component-base": "23.3.0-alpha2",
|
|
41
|
+
"@vaadin/field-base": "23.3.0-alpha2",
|
|
42
|
+
"@vaadin/input-container": "23.3.0-alpha2",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha2",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
|
|
57
57
|
}
|
|
@@ -16,8 +16,6 @@ export interface TimePickerTime {
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export interface TimePickerI18n {
|
|
19
|
-
clear: string;
|
|
20
|
-
selector: string;
|
|
21
19
|
parseTime(time: string): TimePickerTime | undefined;
|
|
22
20
|
formatTime(time: TimePickerTime | undefined): string;
|
|
23
21
|
}
|
|
@@ -34,6 +32,11 @@ export type TimePickerChangeEvent = Event & {
|
|
|
34
32
|
*/
|
|
35
33
|
export type TimePickerInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
36
34
|
|
|
35
|
+
/**
|
|
36
|
+
* Fired when the `opened` property changes.
|
|
37
|
+
*/
|
|
38
|
+
export type TimePickerOpenedChangedEvent = CustomEvent<{ value: boolean }>;
|
|
39
|
+
|
|
37
40
|
/**
|
|
38
41
|
* Fired when the `value` property changes.
|
|
39
42
|
*/
|
|
@@ -47,6 +50,8 @@ export type TimePickerValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
|
47
50
|
export interface TimePickerCustomEventMap {
|
|
48
51
|
'invalid-changed': TimePickerInvalidChangedEvent;
|
|
49
52
|
|
|
53
|
+
'opened-changed': TimePickerOpenedChangedEvent;
|
|
54
|
+
|
|
50
55
|
'value-changed': TimePickerValueChangedEvent;
|
|
51
56
|
|
|
52
57
|
validated: TimePickerValidatedEvent;
|
|
@@ -86,6 +91,12 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
86
91
|
* ----------------|----------------
|
|
87
92
|
* `toggle-button` | The toggle button
|
|
88
93
|
*
|
|
94
|
+
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
|
|
95
|
+
*
|
|
96
|
+
* Attribute | Description
|
|
97
|
+
* ----------|------------------------------------------
|
|
98
|
+
* `opened` | Set when the time-picker dropdown is open
|
|
99
|
+
*
|
|
89
100
|
* ### Internal components
|
|
90
101
|
*
|
|
91
102
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
|
@@ -103,6 +114,7 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
103
114
|
*
|
|
104
115
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
105
116
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
117
|
+
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
106
118
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
107
119
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
108
120
|
*/
|
|
@@ -117,6 +129,11 @@ declare class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(El
|
|
|
117
129
|
*/
|
|
118
130
|
value: string;
|
|
119
131
|
|
|
132
|
+
/**
|
|
133
|
+
* True if the dropdown is open, false otherwise.
|
|
134
|
+
*/
|
|
135
|
+
opened: boolean;
|
|
136
|
+
|
|
120
137
|
/**
|
|
121
138
|
* Minimum time allowed.
|
|
122
139
|
*
|
|
@@ -192,6 +209,16 @@ declare class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(El
|
|
|
192
209
|
*/
|
|
193
210
|
i18n: TimePickerI18n;
|
|
194
211
|
|
|
212
|
+
/**
|
|
213
|
+
* Opens the dropdown list.
|
|
214
|
+
*/
|
|
215
|
+
open(): void;
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Closes the dropdown list.
|
|
219
|
+
*/
|
|
220
|
+
close(): void;
|
|
221
|
+
|
|
195
222
|
addEventListener<K extends keyof TimePickerEventMap>(
|
|
196
223
|
type: K,
|
|
197
224
|
listener: (this: TimePicker, ev: TimePickerEventMap[K]) => void,
|
|
@@ -7,6 +7,7 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
|
|
|
7
7
|
import './vaadin-time-picker-combo-box.js';
|
|
8
8
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
9
9
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
|
+
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
10
11
|
import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
|
|
11
12
|
import { InputController } from '@vaadin/field-base/src/input-controller.js';
|
|
12
13
|
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
|
|
@@ -49,6 +50,12 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
|
|
|
49
50
|
* ----------------|----------------
|
|
50
51
|
* `toggle-button` | The toggle button
|
|
51
52
|
*
|
|
53
|
+
* In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
|
|
54
|
+
*
|
|
55
|
+
* Attribute | Description
|
|
56
|
+
* ----------|------------------------------------------
|
|
57
|
+
* `opened` | Set when the time-picker dropdown is open
|
|
58
|
+
*
|
|
52
59
|
* ### Internal components
|
|
53
60
|
*
|
|
54
61
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
|
@@ -66,6 +73,7 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
|
|
|
66
73
|
*
|
|
67
74
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
68
75
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
76
|
+
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
69
77
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
70
78
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
71
79
|
*
|
|
@@ -108,6 +116,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
108
116
|
id="comboBox"
|
|
109
117
|
filtered-items="[[__dropdownItems]]"
|
|
110
118
|
value="{{_comboBoxValue}}"
|
|
119
|
+
opened="{{opened}}"
|
|
111
120
|
disabled="[[disabled]]"
|
|
112
121
|
readonly="[[readonly]]"
|
|
113
122
|
clear-button-visible="[[clearButtonVisible]]"
|
|
@@ -138,6 +147,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
138
147
|
<slot name="error-message"></slot>
|
|
139
148
|
</div>
|
|
140
149
|
</div>
|
|
150
|
+
<slot name="tooltip"></slot>
|
|
141
151
|
`;
|
|
142
152
|
}
|
|
143
153
|
|
|
@@ -158,6 +168,16 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
158
168
|
value: '',
|
|
159
169
|
},
|
|
160
170
|
|
|
171
|
+
/**
|
|
172
|
+
* True if the dropdown is open, false otherwise.
|
|
173
|
+
*/
|
|
174
|
+
opened: {
|
|
175
|
+
type: Boolean,
|
|
176
|
+
notify: true,
|
|
177
|
+
value: false,
|
|
178
|
+
reflectToAttribute: true,
|
|
179
|
+
},
|
|
180
|
+
|
|
161
181
|
/**
|
|
162
182
|
* Minimum time allowed.
|
|
163
183
|
*
|
|
@@ -335,6 +355,11 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
335
355
|
);
|
|
336
356
|
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
337
357
|
this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
|
|
358
|
+
|
|
359
|
+
this._tooltipController = new TooltipController(this);
|
|
360
|
+
this._tooltipController.setShouldShow((timePicker) => !timePicker.opened);
|
|
361
|
+
this._tooltipController.setPosition('top');
|
|
362
|
+
this.addController(this._tooltipController);
|
|
338
363
|
}
|
|
339
364
|
|
|
340
365
|
/**
|
|
@@ -350,6 +375,22 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
350
375
|
}
|
|
351
376
|
}
|
|
352
377
|
|
|
378
|
+
/**
|
|
379
|
+
* Opens the dropdown list.
|
|
380
|
+
*/
|
|
381
|
+
open() {
|
|
382
|
+
if (!this.disabled && !this.readonly) {
|
|
383
|
+
this.opened = true;
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
/**
|
|
388
|
+
* Closes the dropdown list.
|
|
389
|
+
*/
|
|
390
|
+
close() {
|
|
391
|
+
this.opened = false;
|
|
392
|
+
}
|
|
393
|
+
|
|
353
394
|
/**
|
|
354
395
|
* Returns true if the current input value satisfies all constraints (if any).
|
|
355
396
|
* You can override this method for custom validations.
|
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": "23.
|
|
4
|
+
"version": "23.3.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-time-picker",
|
|
11
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
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.3.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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.3.0-alpha2/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -195,6 +195,17 @@
|
|
|
195
195
|
]
|
|
196
196
|
}
|
|
197
197
|
},
|
|
198
|
+
{
|
|
199
|
+
"name": "opened",
|
|
200
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
201
|
+
"value": {
|
|
202
|
+
"type": [
|
|
203
|
+
"boolean",
|
|
204
|
+
"null",
|
|
205
|
+
"undefined"
|
|
206
|
+
]
|
|
207
|
+
}
|
|
208
|
+
},
|
|
198
209
|
{
|
|
199
210
|
"name": "min",
|
|
200
211
|
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
@@ -434,6 +445,17 @@
|
|
|
434
445
|
]
|
|
435
446
|
}
|
|
436
447
|
},
|
|
448
|
+
{
|
|
449
|
+
"name": "opened",
|
|
450
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
451
|
+
"value": {
|
|
452
|
+
"type": [
|
|
453
|
+
"boolean",
|
|
454
|
+
"null",
|
|
455
|
+
"undefined"
|
|
456
|
+
]
|
|
457
|
+
}
|
|
458
|
+
},
|
|
437
459
|
{
|
|
438
460
|
"name": "min",
|
|
439
461
|
"description": "Minimum time allowed.\n\nSupported time formats are in ISO 8601:\n- `hh:mm`\n- `hh:mm:ss`\n- `hh:mm:ss.fff`",
|
|
@@ -501,6 +523,10 @@
|
|
|
501
523
|
"name": "value-changed",
|
|
502
524
|
"description": "Fired when the `value` property changes."
|
|
503
525
|
},
|
|
526
|
+
{
|
|
527
|
+
"name": "opened-changed",
|
|
528
|
+
"description": "Fired when the `opened` property changes."
|
|
529
|
+
},
|
|
504
530
|
{
|
|
505
531
|
"name": "invalid-changed",
|
|
506
532
|
"description": "Fired when the `invalid` property changes."
|
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": "23.
|
|
4
|
+
"version": "23.3.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-time-picker",
|
|
19
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-time-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.
|
|
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.3.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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.3.0-alpha2/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -75,6 +75,13 @@
|
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
+
{
|
|
79
|
+
"name": "?opened",
|
|
80
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
78
85
|
{
|
|
79
86
|
"name": "?autoOpenDisabled",
|
|
80
87
|
"description": "Set true to prevent the overlay from opening automatically.",
|
|
@@ -201,6 +208,13 @@
|
|
|
201
208
|
"kind": "expression"
|
|
202
209
|
}
|
|
203
210
|
},
|
|
211
|
+
{
|
|
212
|
+
"name": "@opened-changed",
|
|
213
|
+
"description": "Fired when the `opened` property changes.",
|
|
214
|
+
"value": {
|
|
215
|
+
"kind": "expression"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
204
218
|
{
|
|
205
219
|
"name": "@invalid-changed",
|
|
206
220
|
"description": "Fired when the `invalid` property changes.",
|