@vaadin/time-picker 25.4.0-alpha1 → 25.4.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/custom-elements.json +1 -1
- package/package.json +14 -14
- package/src/vaadin-time-picker-mixin.js +68 -48
- package/src/vaadin-time-picker.d.ts +1 -0
- package/src/vaadin-time-picker.js +1 -0
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -910,7 +910,7 @@
|
|
|
910
910
|
"declarations": [
|
|
911
911
|
{
|
|
912
912
|
"kind": "class",
|
|
913
|
-
"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 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`field-button` | Set on both clear and toggle 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\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>`](#/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",
|
|
913
|
+
"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 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`field-button` | Set on both clear and toggle 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\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>`](#/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",
|
|
914
914
|
"name": "TimePicker",
|
|
915
915
|
"members": [
|
|
916
916
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "25.4.0-
|
|
3
|
+
"version": "25.4.0-alpha2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.4.0-
|
|
39
|
-
"@vaadin/combo-box": "25.4.0-
|
|
40
|
-
"@vaadin/component-base": "25.4.0-
|
|
41
|
-
"@vaadin/field-base": "25.4.0-
|
|
42
|
-
"@vaadin/input-container": "25.4.0-
|
|
43
|
-
"@vaadin/item": "25.4.0-
|
|
44
|
-
"@vaadin/overlay": "25.4.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.4.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.4.0-alpha2",
|
|
39
|
+
"@vaadin/combo-box": "25.4.0-alpha2",
|
|
40
|
+
"@vaadin/component-base": "25.4.0-alpha2",
|
|
41
|
+
"@vaadin/field-base": "25.4.0-alpha2",
|
|
42
|
+
"@vaadin/input-container": "25.4.0-alpha2",
|
|
43
|
+
"@vaadin/item": "25.4.0-alpha2",
|
|
44
|
+
"@vaadin/overlay": "25.4.0-alpha2",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.4.0-alpha2",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/aura": "25.4.0-
|
|
50
|
-
"@vaadin/chai-plugins": "25.4.0-
|
|
51
|
-
"@vaadin/test-runner-commands": "25.4.0-
|
|
49
|
+
"@vaadin/aura": "25.4.0-alpha2",
|
|
50
|
+
"@vaadin/chai-plugins": "25.4.0-alpha2",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.4.0-alpha2",
|
|
52
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"@vaadin/vaadin-lumo-styles": "25.4.0-
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.4.0-alpha2",
|
|
54
54
|
"sinon": "^22.0.0"
|
|
55
55
|
},
|
|
56
56
|
"customElements": "custom-elements.json",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"web-types.json",
|
|
59
59
|
"web-types.lit.json"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "213f8b55112558d2f976d8730fe44370ca868333"
|
|
62
62
|
}
|
|
@@ -12,6 +12,10 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
|
|
|
12
12
|
import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
|
|
13
13
|
import { formatISOTime, parseISOTime, validateTime } from './vaadin-time-picker-helper.js';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* @typedef {import('./vaadin-time-picker-helper.js').TimePickerTime} TimePickerTime
|
|
17
|
+
*/
|
|
18
|
+
|
|
15
19
|
export const timePickerI18nDefaults = Object.freeze({
|
|
16
20
|
formatTime: formatISOTime,
|
|
17
21
|
parseTime: parseISOTime,
|
|
@@ -305,6 +309,18 @@ export const TimePickerMixin = (superClass) =>
|
|
|
305
309
|
this.__commitValueChange();
|
|
306
310
|
}
|
|
307
311
|
|
|
312
|
+
/**
|
|
313
|
+
* Override an event listener from `ComboBoxBaseMixin` to clear the item
|
|
314
|
+
* highlight, so that the typed text is committed instead of the item.
|
|
315
|
+
* @param {!Event} event
|
|
316
|
+
* @protected
|
|
317
|
+
* @override
|
|
318
|
+
*/
|
|
319
|
+
_onInput(event) {
|
|
320
|
+
this._clearItemHighlight();
|
|
321
|
+
super._onInput(event);
|
|
322
|
+
}
|
|
323
|
+
|
|
308
324
|
/**
|
|
309
325
|
* Override method from `ComboBoxBaseMixin` to implement value commit logic.
|
|
310
326
|
* @protected
|
|
@@ -382,7 +398,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
382
398
|
|
|
383
399
|
/** @private */
|
|
384
400
|
__onArrowPressWithStep(step) {
|
|
385
|
-
const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step
|
|
401
|
+
const objWithStep = this.__addStep(this.__getMsec(this.__memoValue), step);
|
|
386
402
|
this.__memoValue = objWithStep;
|
|
387
403
|
|
|
388
404
|
// Only commit when the formatted text changes, so that a step finer than
|
|
@@ -428,7 +444,8 @@ export const TimePickerMixin = (superClass) =>
|
|
|
428
444
|
}
|
|
429
445
|
|
|
430
446
|
/**
|
|
431
|
-
*
|
|
447
|
+
* @param {TimePickerTime | undefined} obj Time object
|
|
448
|
+
* @return {number} milliseconds
|
|
432
449
|
* @private
|
|
433
450
|
*/
|
|
434
451
|
__getMsec(obj) {
|
|
@@ -441,34 +458,46 @@ export const TimePickerMixin = (superClass) =>
|
|
|
441
458
|
}
|
|
442
459
|
|
|
443
460
|
/**
|
|
444
|
-
*
|
|
445
|
-
*
|
|
461
|
+
* @param {TimePickerTime | undefined} time Time object
|
|
462
|
+
* @return {TimePickerTime | undefined} time object truncated to the step resolution
|
|
463
|
+
* @private
|
|
464
|
+
*/
|
|
465
|
+
__truncateTime(time) {
|
|
466
|
+
return validateTime(time, this.step);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/**
|
|
470
|
+
* @param {string} timeString ISO 8601 time string
|
|
471
|
+
* @return {TimePickerTime | undefined} time object truncated to the step resolution
|
|
446
472
|
* @private
|
|
447
473
|
*/
|
|
448
474
|
__getTimeObject(timeString) {
|
|
449
|
-
return
|
|
475
|
+
return this.__truncateTime(parseISOTime(timeString));
|
|
450
476
|
}
|
|
451
477
|
|
|
452
478
|
/**
|
|
453
|
-
*
|
|
479
|
+
* @param {number} msec Milliseconds since midnight, `24:00` becomes `00:00`
|
|
480
|
+
* @return {!TimePickerTime} time object
|
|
454
481
|
* @private
|
|
455
482
|
*/
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
483
|
+
__getTimeFromMsec(msec) {
|
|
484
|
+
const hh = Math.floor(msec / 1000 / 60 / 60);
|
|
485
|
+
msec -= hh * 1000 * 60 * 60;
|
|
486
|
+
const mm = Math.floor(msec / 1000 / 60);
|
|
487
|
+
msec -= mm * 1000 * 60;
|
|
488
|
+
const ss = Math.floor(msec / 1000);
|
|
489
|
+
msec -= ss * 1000;
|
|
461
490
|
|
|
462
|
-
return
|
|
491
|
+
return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
|
|
463
492
|
}
|
|
464
493
|
|
|
465
494
|
/**
|
|
466
|
-
*
|
|
467
|
-
*
|
|
468
|
-
*
|
|
495
|
+
* @param {number} msec Milliseconds since midnight
|
|
496
|
+
* @param {number} step Step in seconds, negative to subtract
|
|
497
|
+
* @return {!TimePickerTime} time object moved to the next step interval
|
|
469
498
|
* @private
|
|
470
499
|
*/
|
|
471
|
-
__addStep(msec, step
|
|
500
|
+
__addStep(msec, step) {
|
|
472
501
|
// If the time is `00:00` and step changes value downwards, it should be considered as `24:00`
|
|
473
502
|
if (msec === 0 && step < 0) {
|
|
474
503
|
msec = 24 * 60 * 60 * 1000;
|
|
@@ -476,30 +505,23 @@ export const TimePickerMixin = (superClass) =>
|
|
|
476
505
|
|
|
477
506
|
const stepMsec = step * 1000;
|
|
478
507
|
const diffToNext = msec % stepMsec;
|
|
479
|
-
if (stepMsec < 0 && diffToNext
|
|
508
|
+
if (stepMsec < 0 && diffToNext) {
|
|
480
509
|
msec -= diffToNext;
|
|
481
|
-
} else if (stepMsec > 0 && diffToNext
|
|
510
|
+
} else if (stepMsec > 0 && diffToNext) {
|
|
482
511
|
msec -= diffToNext - stepMsec;
|
|
483
512
|
} else {
|
|
484
513
|
msec += stepMsec;
|
|
485
514
|
}
|
|
486
515
|
|
|
487
|
-
|
|
488
|
-
msec -= hh * 1000 * 60 * 60;
|
|
489
|
-
const mm = Math.floor(msec / 1000 / 60);
|
|
490
|
-
msec -= mm * 1000 * 60;
|
|
491
|
-
const ss = Math.floor(msec / 1000);
|
|
492
|
-
msec -= ss * 1000;
|
|
493
|
-
|
|
494
|
-
return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
|
|
516
|
+
return this.__getTimeFromMsec(msec);
|
|
495
517
|
}
|
|
496
518
|
|
|
497
519
|
/** @private */
|
|
498
520
|
__updateDropdownItems() {
|
|
499
|
-
const
|
|
500
|
-
const
|
|
521
|
+
const minMsec = this.__getMsec(this.__getTimeObject(this.min || MIN_ALLOWED_TIME));
|
|
522
|
+
const maxMsec = this.__getMsec(this.__getTimeObject(this.max || MAX_ALLOWED_TIME));
|
|
501
523
|
|
|
502
|
-
this._dropdownItems = this.__generateDropdownList(
|
|
524
|
+
this._dropdownItems = this.__generateDropdownList(minMsec, maxMsec, this.step);
|
|
503
525
|
}
|
|
504
526
|
|
|
505
527
|
/** @private */
|
|
@@ -518,22 +540,18 @@ export const TimePickerMixin = (superClass) =>
|
|
|
518
540
|
}
|
|
519
541
|
|
|
520
542
|
/** @private */
|
|
521
|
-
__generateDropdownList(
|
|
543
|
+
__generateDropdownList(minMsec, maxMsec, step) {
|
|
522
544
|
if (step < 15 * 60 || !this.__validDayDivisor(step)) {
|
|
523
545
|
return [];
|
|
524
546
|
}
|
|
525
547
|
|
|
526
|
-
const generatedList = [];
|
|
527
|
-
|
|
528
548
|
// Default step in overlay items is 1 hour
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
549
|
+
const stepMsec = (step || 3600) * 1000;
|
|
550
|
+
|
|
551
|
+
const generatedList = [];
|
|
532
552
|
|
|
533
|
-
let
|
|
534
|
-
|
|
535
|
-
const timeObj = validateTime(this.__addStep(time * 1000, step), step);
|
|
536
|
-
time += step;
|
|
553
|
+
for (let msec = minMsec; msec <= maxMsec; msec += stepMsec) {
|
|
554
|
+
const timeObj = validateTime(this.__getTimeFromMsec(msec), step);
|
|
537
555
|
const formatted = this.__effectiveI18n.formatTime(timeObj);
|
|
538
556
|
generatedList.push({ label: formatted, value: formatISOTime(timeObj) });
|
|
539
557
|
}
|
|
@@ -547,7 +565,7 @@ export const TimePickerMixin = (superClass) =>
|
|
|
547
565
|
* @override
|
|
548
566
|
*/
|
|
549
567
|
_valueChanged(value, oldValue) {
|
|
550
|
-
//
|
|
568
|
+
// Truncate value to the step resolution before marking as committed.
|
|
551
569
|
const parsedObj = (this.__memoValue = this.__getTimeObject(value));
|
|
552
570
|
const newValue = formatISOTime(parsedObj);
|
|
553
571
|
|
|
@@ -587,15 +605,15 @@ export const TimePickerMixin = (superClass) =>
|
|
|
587
605
|
|
|
588
606
|
/**
|
|
589
607
|
* Sets the value and the input text from the given time,
|
|
590
|
-
*
|
|
608
|
+
* truncated to the resolution defined by the step.
|
|
591
609
|
*
|
|
592
610
|
* @param {!TimePickerTime} time
|
|
593
611
|
* @private
|
|
594
612
|
*/
|
|
595
613
|
__setValueFromTime(time) {
|
|
596
|
-
const
|
|
597
|
-
this.__setUncommittedValue(formatISOTime(
|
|
598
|
-
this.__updateInputValue(
|
|
614
|
+
const truncated = this.__truncateTime(time);
|
|
615
|
+
this.__setUncommittedValue(formatISOTime(truncated));
|
|
616
|
+
this.__updateInputValue(truncated);
|
|
599
617
|
}
|
|
600
618
|
|
|
601
619
|
/**
|
|
@@ -620,7 +638,10 @@ export const TimePickerMixin = (superClass) =>
|
|
|
620
638
|
this._comboBoxValue = text;
|
|
621
639
|
}
|
|
622
640
|
|
|
623
|
-
/**
|
|
641
|
+
/**
|
|
642
|
+
* @param {TimePickerTime | undefined} obj Time object
|
|
643
|
+
* @private
|
|
644
|
+
*/
|
|
624
645
|
__updateInputValue(obj) {
|
|
625
646
|
const text = this.__effectiveI18n.formatTime(obj) || '';
|
|
626
647
|
this._inputElementValue = text;
|
|
@@ -628,8 +649,6 @@ export const TimePickerMixin = (superClass) =>
|
|
|
628
649
|
}
|
|
629
650
|
|
|
630
651
|
/**
|
|
631
|
-
* Returns true if `time` satisfies the `min` and `max` constraints (if any).
|
|
632
|
-
*
|
|
633
652
|
* @param {!TimePickerTime} time Value to check against constraints
|
|
634
653
|
* @return {boolean} True if `time` satisfies the constraints
|
|
635
654
|
* @protected
|
|
@@ -660,13 +679,14 @@ export const TimePickerMixin = (superClass) =>
|
|
|
660
679
|
}
|
|
661
680
|
|
|
662
681
|
/**
|
|
682
|
+
* Override method inherited from `ComboBoxBaseMixin` to only
|
|
683
|
+
* open overlay when clicking on label or the input container.
|
|
663
684
|
* @param {Event} event
|
|
664
685
|
* @protected
|
|
665
686
|
*/
|
|
666
687
|
_onHostClick(event) {
|
|
667
688
|
const path = event.composedPath();
|
|
668
689
|
|
|
669
|
-
// Open dropdown only when clicking on the label or input field
|
|
670
690
|
if (path.includes(this._labelNode) || path.includes(this._inputContainer)) {
|
|
671
691
|
super._onHostClick(event);
|
|
672
692
|
}
|
|
@@ -123,6 +123,7 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
123
123
|
* | `--vaadin-input-field-error-font-weight` |
|
|
124
124
|
* | `--vaadin-input-field-error-line-height` |
|
|
125
125
|
* | `--vaadin-input-field-gap` |
|
|
126
|
+
* | `--vaadin-input-field-height` |
|
|
126
127
|
* | `--vaadin-input-field-helper-color` |
|
|
127
128
|
* | `--vaadin-input-field-helper-font-size` |
|
|
128
129
|
* | `--vaadin-input-field-helper-font-weight` |
|
|
@@ -83,6 +83,7 @@ import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
|
83
83
|
* | `--vaadin-input-field-error-font-weight` |
|
|
84
84
|
* | `--vaadin-input-field-error-line-height` |
|
|
85
85
|
* | `--vaadin-input-field-gap` |
|
|
86
|
+
* | `--vaadin-input-field-height` |
|
|
86
87
|
* | `--vaadin-input-field-helper-color` |
|
|
87
88
|
* | `--vaadin-input-field-helper-font-size` |
|
|
88
89
|
* | `--vaadin-input-field-helper-font-weight` |
|
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.4.0-
|
|
4
|
+
"version": "25.4.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 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`field-button` | Set on both clear and toggle 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\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.4.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 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`field-button` | Set on both clear and toggle 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\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.4.0-alpha2/#/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": "accessible-description-ref",
|
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.4.0-
|
|
4
|
+
"version": "25.4.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 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`field-button` | Set on both clear and toggle 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\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.4.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 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`field-button` | Set on both clear and toggle 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-time-picker-overlay-max-height` |\n| `--vaadin-time-picker-overlay-width` |\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.4.0-alpha2/#/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
|
{
|