@vaadin/time-picker 23.2.0 → 23.3.0-alpha1
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 +23 -7
- package/src/vaadin-time-picker.js +40 -0
- package/web-types.json +32 -2
- package/web-types.lit.json +23 -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-alpha1",
|
|
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-alpha1",
|
|
40
|
+
"@vaadin/component-base": "23.3.0-alpha1",
|
|
41
|
+
"@vaadin/field-base": "23.3.0-alpha1",
|
|
42
|
+
"@vaadin/input-container": "23.3.0-alpha1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "23.3.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
|
|
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": "beabc527d4b1274eb798ff701d406fed45cfe638"
|
|
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
|
*
|
|
@@ -193,15 +210,14 @@ declare class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(El
|
|
|
193
210
|
i18n: TimePickerI18n;
|
|
194
211
|
|
|
195
212
|
/**
|
|
196
|
-
*
|
|
213
|
+
* Opens the dropdown list.
|
|
197
214
|
*/
|
|
198
|
-
|
|
215
|
+
open(): void;
|
|
199
216
|
|
|
200
217
|
/**
|
|
201
|
-
*
|
|
202
|
-
* You can override this method for custom validations.
|
|
218
|
+
* Closes the dropdown list.
|
|
203
219
|
*/
|
|
204
|
-
|
|
220
|
+
close(): void;
|
|
205
221
|
|
|
206
222
|
addEventListener<K extends keyof TimePickerEventMap>(
|
|
207
223
|
type: K,
|
|
@@ -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,10 @@ 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.addController(this._tooltipController);
|
|
338
362
|
}
|
|
339
363
|
|
|
340
364
|
/**
|
|
@@ -350,6 +374,22 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
|
|
|
350
374
|
}
|
|
351
375
|
}
|
|
352
376
|
|
|
377
|
+
/**
|
|
378
|
+
* Opens the dropdown list.
|
|
379
|
+
*/
|
|
380
|
+
open() {
|
|
381
|
+
if (!this.disabled && !this.readonly) {
|
|
382
|
+
this.opened = true;
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* Closes the dropdown list.
|
|
388
|
+
*/
|
|
389
|
+
close() {
|
|
390
|
+
this.opened = false;
|
|
391
|
+
}
|
|
392
|
+
|
|
353
393
|
/**
|
|
354
394
|
* Returns true if the current input value satisfies all constraints (if any).
|
|
355
395
|
* 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-alpha1",
|
|
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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/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`",
|
|
@@ -500,6 +522,14 @@
|
|
|
500
522
|
{
|
|
501
523
|
"name": "value-changed",
|
|
502
524
|
"description": "Fired when the `value` property changes."
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "opened-changed",
|
|
528
|
+
"description": "Fired when the `opened` property changes."
|
|
529
|
+
},
|
|
530
|
+
{
|
|
531
|
+
"name": "invalid-changed",
|
|
532
|
+
"description": "Fired when the `invalid` property changes."
|
|
503
533
|
}
|
|
504
534
|
]
|
|
505
535
|
}
|
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-alpha1",
|
|
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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/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.",
|
|
@@ -200,6 +207,20 @@
|
|
|
200
207
|
"value": {
|
|
201
208
|
"kind": "expression"
|
|
202
209
|
}
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "@opened-changed",
|
|
213
|
+
"description": "Fired when the `opened` property changes.",
|
|
214
|
+
"value": {
|
|
215
|
+
"kind": "expression"
|
|
216
|
+
}
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "@invalid-changed",
|
|
220
|
+
"description": "Fired when the `invalid` property changes.",
|
|
221
|
+
"value": {
|
|
222
|
+
"kind": "expression"
|
|
223
|
+
}
|
|
203
224
|
}
|
|
204
225
|
]
|
|
205
226
|
}
|