@vaadin/time-picker 24.8.0-alpha8 → 25.0.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/README.md +0 -23
- package/package.json +13 -16
- package/src/vaadin-time-picker-combo-box.js +25 -21
- package/src/vaadin-time-picker-item.js +17 -12
- package/src/vaadin-time-picker-mixin.d.ts +0 -2
- package/src/vaadin-time-picker-overlay.js +12 -8
- package/src/vaadin-time-picker-scroller.js +31 -26
- package/src/vaadin-time-picker.d.ts +1 -1
- package/src/vaadin-time-picker.js +44 -26
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
- package/src/vaadin-lit-time-picker-combo-box.js +0 -92
- package/src/vaadin-lit-time-picker-item.js +0 -50
- package/src/vaadin-lit-time-picker-overlay.js +0 -60
- package/src/vaadin-lit-time-picker-scroller.js +0 -59
- package/src/vaadin-lit-time-picker.js +0 -117
- package/theme/lumo/vaadin-lit-time-picker.d.ts +0 -7
- package/theme/lumo/vaadin-lit-time-picker.js +0 -7
- package/theme/material/vaadin-lit-time-picker.d.ts +0 -7
- package/theme/material/vaadin-lit-time-picker.js +0 -7
- package/theme/material/vaadin-time-picker-styles.d.ts +0 -7
- package/theme/material/vaadin-time-picker-styles.js +0 -42
- package/theme/material/vaadin-time-picker.d.ts +0 -7
- package/theme/material/vaadin-time-picker.js +0 -7
- package/vaadin-lit-time-picker.d.ts +0 -1
- package/vaadin-lit-time-picker.js +0 -2
package/README.md
CHANGED
|
@@ -26,29 +26,6 @@ Once installed, import the component in your application:
|
|
|
26
26
|
import '@vaadin/time-picker';
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
## Themes
|
|
30
|
-
|
|
31
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
32
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/time-picker/vaadin-time-picker.js) of the package uses the Lumo theme.
|
|
33
|
-
|
|
34
|
-
To use the Material theme, import the component from the `theme/material` folder:
|
|
35
|
-
|
|
36
|
-
```js
|
|
37
|
-
import '@vaadin/time-picker/theme/material/vaadin-time-picker.js';
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
You can also import the Lumo version of the component explicitly:
|
|
41
|
-
|
|
42
|
-
```js
|
|
43
|
-
import '@vaadin/time-picker/theme/lumo/vaadin-time-picker.js';
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
|
|
47
|
-
|
|
48
|
-
```js
|
|
49
|
-
import '@vaadin/time-picker/src/vaadin-time-picker.js';
|
|
50
|
-
```
|
|
51
|
-
|
|
52
29
|
## Contributing
|
|
53
30
|
|
|
54
31
|
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -31,26 +31,23 @@
|
|
|
31
31
|
"Vaadin",
|
|
32
32
|
"vaadin-time-picker",
|
|
33
33
|
"web-components",
|
|
34
|
-
"web-component"
|
|
35
|
-
"polymer"
|
|
34
|
+
"web-component"
|
|
36
35
|
],
|
|
37
36
|
"dependencies": {
|
|
38
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/
|
|
43
|
-
"@vaadin/
|
|
44
|
-
"@vaadin/
|
|
45
|
-
"@vaadin/
|
|
46
|
-
"@vaadin/vaadin-
|
|
47
|
-
"@vaadin/vaadin-material-styles": "24.8.0-alpha8",
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
|
|
38
|
+
"@vaadin/combo-box": "25.0.0-alpha1",
|
|
39
|
+
"@vaadin/component-base": "25.0.0-alpha1",
|
|
40
|
+
"@vaadin/field-base": "25.0.0-alpha1",
|
|
41
|
+
"@vaadin/input-container": "25.0.0-alpha1",
|
|
42
|
+
"@vaadin/item": "25.0.0-alpha1",
|
|
43
|
+
"@vaadin/overlay": "25.0.0-alpha1",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
|
|
49
46
|
"lit": "^3.0.0"
|
|
50
47
|
},
|
|
51
48
|
"devDependencies": {
|
|
52
|
-
"@vaadin/chai-plugins": "
|
|
53
|
-
"@vaadin/test-runner-commands": "
|
|
49
|
+
"@vaadin/chai-plugins": "25.0.0-alpha1",
|
|
50
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha1",
|
|
54
51
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
55
52
|
"sinon": "^18.0.0"
|
|
56
53
|
},
|
|
@@ -58,5 +55,5 @@
|
|
|
58
55
|
"web-types.json",
|
|
59
56
|
"web-types.lit.json"
|
|
60
57
|
],
|
|
61
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
|
|
62
59
|
}
|
|
@@ -6,9 +6,11 @@
|
|
|
6
6
|
import './vaadin-time-picker-item.js';
|
|
7
7
|
import './vaadin-time-picker-overlay.js';
|
|
8
8
|
import './vaadin-time-picker-scroller.js';
|
|
9
|
-
import { html,
|
|
9
|
+
import { css, html, LitElement } from 'lit';
|
|
10
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
11
|
import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
|
|
11
12
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
13
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
15
|
|
|
14
16
|
/**
|
|
@@ -20,30 +22,16 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
20
22
|
* @mixes ThemableMixin
|
|
21
23
|
* @private
|
|
22
24
|
*/
|
|
23
|
-
class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(
|
|
25
|
+
class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolylitMixin(LitElement))) {
|
|
24
26
|
static get is() {
|
|
25
27
|
return 'vaadin-time-picker-combo-box';
|
|
26
28
|
}
|
|
27
29
|
|
|
28
|
-
static get
|
|
29
|
-
return
|
|
30
|
-
|
|
31
|
-
:
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
</style>
|
|
35
|
-
|
|
36
|
-
<slot></slot>
|
|
37
|
-
|
|
38
|
-
<vaadin-time-picker-overlay
|
|
39
|
-
id="overlay"
|
|
40
|
-
opened="[[_overlayOpened]]"
|
|
41
|
-
loading$="[[loading]]"
|
|
42
|
-
theme$="[[_theme]]"
|
|
43
|
-
position-target="[[positionTarget]]"
|
|
44
|
-
no-vertical-overlap
|
|
45
|
-
restore-focus-node="[[inputElement]]"
|
|
46
|
-
></vaadin-time-picker-overlay>
|
|
30
|
+
static get styles() {
|
|
31
|
+
return css`
|
|
32
|
+
:host([opened]) {
|
|
33
|
+
pointer-events: auto;
|
|
34
|
+
}
|
|
47
35
|
`;
|
|
48
36
|
}
|
|
49
37
|
|
|
@@ -73,6 +61,22 @@ class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolymerElement)) {
|
|
|
73
61
|
return this.querySelector('[part="clear-button"]');
|
|
74
62
|
}
|
|
75
63
|
|
|
64
|
+
/** @protected */
|
|
65
|
+
render() {
|
|
66
|
+
return html`
|
|
67
|
+
<slot></slot>
|
|
68
|
+
|
|
69
|
+
<vaadin-time-picker-overlay
|
|
70
|
+
id="overlay"
|
|
71
|
+
.opened="${this._overlayOpened}"
|
|
72
|
+
?loading="${this.loading}"
|
|
73
|
+
theme="${ifDefined(this._theme)}"
|
|
74
|
+
.positionTarget="${this.positionTarget}"
|
|
75
|
+
.restoreFocusNode="${this.inputElement}"
|
|
76
|
+
no-vertical-overlap
|
|
77
|
+
></vaadin-time-picker-overlay>
|
|
78
|
+
`;
|
|
79
|
+
}
|
|
76
80
|
/** @protected */
|
|
77
81
|
ready() {
|
|
78
82
|
super.ready();
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html,
|
|
6
|
+
import { css, html, LitElement } from 'lit';
|
|
7
7
|
import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
9
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
10
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
11
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
12
|
|
|
12
13
|
/**
|
|
@@ -36,22 +37,26 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
36
37
|
* @mixes DirMixin
|
|
37
38
|
* @private
|
|
38
39
|
*/
|
|
39
|
-
export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(
|
|
40
|
+
export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
|
|
40
41
|
static get is() {
|
|
41
42
|
return 'vaadin-time-picker-item';
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
static get
|
|
45
|
-
return
|
|
46
|
-
|
|
47
|
-
:
|
|
48
|
-
|
|
49
|
-
}
|
|
45
|
+
static get styles() {
|
|
46
|
+
return css`
|
|
47
|
+
:host {
|
|
48
|
+
display: block;
|
|
49
|
+
}
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
:host([hidden]) {
|
|
52
|
+
display: none !important;
|
|
53
|
+
}
|
|
54
|
+
`;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/** @protected */
|
|
58
|
+
render() {
|
|
59
|
+
return html`
|
|
55
60
|
<span part="checkmark" aria-hidden="true"></span>
|
|
56
61
|
<div part="content">
|
|
57
62
|
<slot></slot>
|
|
@@ -8,7 +8,6 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
|
|
|
8
8
|
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
9
9
|
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
10
10
|
import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
11
|
-
import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
|
|
12
11
|
import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
13
12
|
import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
14
13
|
import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
|
|
@@ -32,7 +31,6 @@ export interface TimePickerI18n {
|
|
|
32
31
|
export declare function TimePickerMixin<T extends Constructor<HTMLElement>>(
|
|
33
32
|
base: T,
|
|
34
33
|
): Constructor<ClearButtonMixinClass> &
|
|
35
|
-
Constructor<ControllerMixinClass> &
|
|
36
34
|
Constructor<DelegateFocusMixinClass> &
|
|
37
35
|
Constructor<DelegateStateMixinClass> &
|
|
38
36
|
Constructor<DisabledMixinClass> &
|
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html,
|
|
6
|
+
import { css, html, LitElement } from 'lit';
|
|
7
7
|
import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
9
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
10
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
11
|
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
11
12
|
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
12
|
-
import {
|
|
13
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
14
|
|
|
14
15
|
const timePickerOverlayStyles = css`
|
|
15
16
|
#overlay {
|
|
@@ -23,10 +24,6 @@ const timePickerOverlayStyles = css`
|
|
|
23
24
|
}
|
|
24
25
|
`;
|
|
25
26
|
|
|
26
|
-
registerStyles('vaadin-time-picker-overlay', [overlayStyles, timePickerOverlayStyles], {
|
|
27
|
-
moduleId: 'vaadin-time-picker-overlay-styles',
|
|
28
|
-
});
|
|
29
|
-
|
|
30
27
|
/**
|
|
31
28
|
* An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
|
|
32
29
|
*
|
|
@@ -37,12 +34,19 @@ registerStyles('vaadin-time-picker-overlay', [overlayStyles, timePickerOverlaySt
|
|
|
37
34
|
* @mixes ThemableMixin
|
|
38
35
|
* @private
|
|
39
36
|
*/
|
|
40
|
-
export class TimePickerOverlay extends ComboBoxOverlayMixin(
|
|
37
|
+
export class TimePickerOverlay extends ComboBoxOverlayMixin(
|
|
38
|
+
OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
|
|
39
|
+
) {
|
|
41
40
|
static get is() {
|
|
42
41
|
return 'vaadin-time-picker-overlay';
|
|
43
42
|
}
|
|
44
43
|
|
|
45
|
-
static get
|
|
44
|
+
static get styles() {
|
|
45
|
+
return [overlayStyles, timePickerOverlayStyles];
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/** @protected */
|
|
49
|
+
render() {
|
|
46
50
|
return html`
|
|
47
51
|
<div id="backdrop" part="backdrop" hidden></div>
|
|
48
52
|
<div part="overlay" id="overlay">
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html,
|
|
6
|
+
import { css, html, LitElement } from 'lit';
|
|
7
7
|
import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
|
|
8
8
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
|
|
@@ -15,36 +16,40 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
|
15
16
|
* @mixes ComboBoxScrollerMixin
|
|
16
17
|
* @private
|
|
17
18
|
*/
|
|
18
|
-
export class TimePickerScroller extends ComboBoxScrollerMixin(
|
|
19
|
+
export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
|
|
19
20
|
static get is() {
|
|
20
21
|
return 'vaadin-time-picker-scroller';
|
|
21
22
|
}
|
|
22
23
|
|
|
23
|
-
static get
|
|
24
|
+
static get styles() {
|
|
25
|
+
return css`
|
|
26
|
+
:host {
|
|
27
|
+
display: block;
|
|
28
|
+
min-height: 1px;
|
|
29
|
+
overflow: auto;
|
|
30
|
+
|
|
31
|
+
/* Fixes item background from getting on top of scrollbars on Safari */
|
|
32
|
+
transform: translate3d(0, 0, 0);
|
|
33
|
+
|
|
34
|
+
/* Enable momentum scrolling on iOS */
|
|
35
|
+
-webkit-overflow-scrolling: touch;
|
|
36
|
+
|
|
37
|
+
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
|
|
38
|
+
box-shadow: 0 0 0 white;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
#selector {
|
|
42
|
+
border-width: var(--_vaadin-time-picker-items-container-border-width);
|
|
43
|
+
border-style: var(--_vaadin-time-picker-items-container-border-style);
|
|
44
|
+
border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
|
|
45
|
+
position: relative;
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/** @protected */
|
|
51
|
+
render() {
|
|
24
52
|
return html`
|
|
25
|
-
<style>
|
|
26
|
-
:host {
|
|
27
|
-
display: block;
|
|
28
|
-
min-height: 1px;
|
|
29
|
-
overflow: auto;
|
|
30
|
-
|
|
31
|
-
/* Fixes item background from getting on top of scrollbars on Safari */
|
|
32
|
-
transform: translate3d(0, 0, 0);
|
|
33
|
-
|
|
34
|
-
/* Enable momentum scrolling on iOS */
|
|
35
|
-
-webkit-overflow-scrolling: touch;
|
|
36
|
-
|
|
37
|
-
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
|
|
38
|
-
box-shadow: 0 0 0 white;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
#selector {
|
|
42
|
-
border-width: var(--_vaadin-time-picker-items-container-border-width);
|
|
43
|
-
border-style: var(--_vaadin-time-picker-items-container-border-style);
|
|
44
|
-
border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
|
|
45
|
-
position: relative;
|
|
46
|
-
}
|
|
47
|
-
</style>
|
|
48
53
|
<div id="selector">
|
|
49
54
|
<slot></slot>
|
|
50
55
|
</div>
|
|
@@ -93,7 +93,7 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
|
|
|
93
93
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
|
94
94
|
* components are themable:
|
|
95
95
|
*
|
|
96
|
-
* - `<vaadin-time-picker-combo-box>` -
|
|
96
|
+
* - `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](#/elements/vaadin-combo-box).
|
|
97
97
|
* - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
|
|
98
98
|
* - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
|
|
99
99
|
* - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/input-container/src/vaadin-input-container.js';
|
|
7
7
|
import './vaadin-time-picker-combo-box.js';
|
|
8
|
-
import { html,
|
|
8
|
+
import { css, html, LitElement } from 'lit';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
10
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
13
|
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
12
|
-
import {
|
|
14
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
15
|
import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
14
16
|
|
|
15
|
-
registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-picker-styles' });
|
|
16
|
-
|
|
17
17
|
/**
|
|
18
18
|
* `<vaadin-time-picker>` is a Web Component providing a time-selection field.
|
|
19
19
|
*
|
|
@@ -56,7 +56,7 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
|
|
|
56
56
|
* In addition to `<vaadin-time-picker>` itself, the following internal
|
|
57
57
|
* components are themable:
|
|
58
58
|
*
|
|
59
|
-
* - `<vaadin-time-picker-combo-box>` -
|
|
59
|
+
* - `<vaadin-time-picker-combo-box>` - an internal version of [`<vaadin-combo-box>`](#/elements/vaadin-combo-box).
|
|
60
60
|
* - `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
|
|
61
61
|
* - `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
|
|
62
62
|
* - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
|
|
@@ -94,14 +94,15 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
|
|
|
94
94
|
* @mixes ThemableMixin
|
|
95
95
|
* @mixes TimePickerMixin
|
|
96
96
|
*/
|
|
97
|
-
class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(
|
|
97
|
+
class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
|
|
98
98
|
static get is() {
|
|
99
99
|
return 'vaadin-time-picker';
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
static get
|
|
103
|
-
return
|
|
104
|
-
|
|
102
|
+
static get styles() {
|
|
103
|
+
return [
|
|
104
|
+
inputFieldShared,
|
|
105
|
+
css`
|
|
105
106
|
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
|
|
106
107
|
:host([dir='rtl']) [part='input-field'] {
|
|
107
108
|
direction: ltr;
|
|
@@ -115,34 +116,41 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolymerEleme
|
|
|
115
116
|
[part~='toggle-button'] {
|
|
116
117
|
cursor: pointer;
|
|
117
118
|
}
|
|
118
|
-
|
|
119
|
+
`,
|
|
120
|
+
];
|
|
121
|
+
}
|
|
119
122
|
|
|
123
|
+
/** @protected */
|
|
124
|
+
render() {
|
|
125
|
+
return html`
|
|
120
126
|
<div class="vaadin-time-picker-container">
|
|
121
127
|
<div part="label">
|
|
122
128
|
<slot name="label"></slot>
|
|
123
|
-
<span part="required-indicator" aria-hidden="true"
|
|
129
|
+
<span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
|
|
124
130
|
</div>
|
|
125
131
|
|
|
126
132
|
<vaadin-time-picker-combo-box
|
|
127
133
|
id="comboBox"
|
|
128
|
-
|
|
129
|
-
value="{
|
|
130
|
-
opened="{
|
|
131
|
-
disabled="
|
|
132
|
-
readonly="
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
theme
|
|
138
|
-
|
|
134
|
+
.filteredItems="${this.__dropdownItems}"
|
|
135
|
+
.value="${this._comboBoxValue}"
|
|
136
|
+
.opened="${this.opened}"
|
|
137
|
+
.disabled="${this.disabled}"
|
|
138
|
+
.readonly="${this.readonly}"
|
|
139
|
+
.clearButtonVisible="${this.clearButtonVisible}"
|
|
140
|
+
.autoOpenDisabled="${this.autoOpenDisabled}"
|
|
141
|
+
.overlayClass="${this.overlayClass}"
|
|
142
|
+
.positionTarget="${this._inputContainer}"
|
|
143
|
+
theme="${ifDefined(this._theme)}"
|
|
144
|
+
@value-changed="${this.__onComboBoxValueChanged}"
|
|
145
|
+
@opened-changed="${this.__onComboBoxOpenedChanged}"
|
|
146
|
+
@change="${this.__onComboBoxChange}"
|
|
139
147
|
>
|
|
140
148
|
<vaadin-input-container
|
|
141
149
|
part="input-field"
|
|
142
|
-
readonly="
|
|
143
|
-
disabled="
|
|
144
|
-
invalid="
|
|
145
|
-
theme
|
|
150
|
+
.readonly="${this.readonly}"
|
|
151
|
+
.disabled="${this.disabled}"
|
|
152
|
+
.invalid="${this.invalid}"
|
|
153
|
+
theme="${ifDefined(this._theme)}"
|
|
146
154
|
>
|
|
147
155
|
<slot name="prefix" slot="prefix"></slot>
|
|
148
156
|
<slot name="input"></slot>
|
|
@@ -162,6 +170,16 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolymerEleme
|
|
|
162
170
|
<slot name="tooltip"></slot>
|
|
163
171
|
`;
|
|
164
172
|
}
|
|
173
|
+
|
|
174
|
+
/** @private */
|
|
175
|
+
__onComboBoxOpenedChanged(event) {
|
|
176
|
+
this.opened = event.detail.value;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/** @private */
|
|
180
|
+
__onComboBoxValueChanged(event) {
|
|
181
|
+
this._comboBoxValue = event.detail.value;
|
|
182
|
+
}
|
|
165
183
|
}
|
|
166
184
|
|
|
167
185
|
defineCustomElement(TimePicker);
|
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": "
|
|
4
|
+
"version": "25.0.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-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-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/
|
|
11
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\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/25.0.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>` - an internal version of [`<vaadin-combo-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-combo-box).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.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/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
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": "
|
|
4
|
+
"version": "25.0.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-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-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/
|
|
19
|
+
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-time-picker-overlay-width` | Width of the overlay | `auto`\n`--vaadin-time-picker-overlay-max-height`| Max height of the overlay | `65vh`\n\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/25.0.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>` - an internal version of [`<vaadin-combo-box>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-combo-box).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/25.0.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/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
|
{
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import './vaadin-lit-time-picker-item.js';
|
|
7
|
-
import './vaadin-lit-time-picker-overlay.js';
|
|
8
|
-
import './vaadin-lit-time-picker-scroller.js';
|
|
9
|
-
import { css, html, LitElement } from 'lit';
|
|
10
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
-
import { ComboBoxMixin } from '@vaadin/combo-box/src/vaadin-combo-box-mixin.js';
|
|
12
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
13
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
14
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
|
|
18
|
-
*
|
|
19
|
-
* @customElement
|
|
20
|
-
* @extends HTMLElement
|
|
21
|
-
* @mixes ComboBoxMixin
|
|
22
|
-
* @mixes ThemableMixin
|
|
23
|
-
* @private
|
|
24
|
-
*/
|
|
25
|
-
class TimePickerComboBox extends ComboBoxMixin(ThemableMixin(PolylitMixin(LitElement))) {
|
|
26
|
-
static get is() {
|
|
27
|
-
return 'vaadin-time-picker-combo-box';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
static get styles() {
|
|
31
|
-
return css`
|
|
32
|
-
:host([opened]) {
|
|
33
|
-
pointer-events: auto;
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
static get properties() {
|
|
39
|
-
return {
|
|
40
|
-
positionTarget: {
|
|
41
|
-
type: Object,
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Tag name prefix used by scroller and items.
|
|
48
|
-
* @protected
|
|
49
|
-
* @return {string}
|
|
50
|
-
*/
|
|
51
|
-
get _tagNamePrefix() {
|
|
52
|
-
return 'vaadin-time-picker';
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Reference to the clear button element.
|
|
57
|
-
* @protected
|
|
58
|
-
* @return {!HTMLElement}
|
|
59
|
-
*/
|
|
60
|
-
get clearElement() {
|
|
61
|
-
return this.querySelector('[part="clear-button"]');
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/** @protected */
|
|
65
|
-
render() {
|
|
66
|
-
return html`
|
|
67
|
-
<slot></slot>
|
|
68
|
-
|
|
69
|
-
<vaadin-time-picker-overlay
|
|
70
|
-
id="overlay"
|
|
71
|
-
.opened="${this._overlayOpened}"
|
|
72
|
-
?loading="${this.loading}"
|
|
73
|
-
theme="${ifDefined(this._theme)}"
|
|
74
|
-
.positionTarget="${this.positionTarget}"
|
|
75
|
-
.restoreFocusNode="${this.inputElement}"
|
|
76
|
-
no-vertical-overlap
|
|
77
|
-
></vaadin-time-picker-overlay>
|
|
78
|
-
`;
|
|
79
|
-
}
|
|
80
|
-
/** @protected */
|
|
81
|
-
ready() {
|
|
82
|
-
super.ready();
|
|
83
|
-
|
|
84
|
-
this.allowCustomValue = true;
|
|
85
|
-
this._toggleElement = this.querySelector('.toggle-button');
|
|
86
|
-
|
|
87
|
-
// See https://github.com/vaadin/vaadin-time-picker/issues/145
|
|
88
|
-
this.setAttribute('dir', 'ltr');
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
defineCustomElement(TimePickerComboBox);
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
|
|
8
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
|
-
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
10
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* LitElement based version of `<vaadin-time-picker-item>` web component.
|
|
15
|
-
*
|
|
16
|
-
* ## Disclaimer
|
|
17
|
-
*
|
|
18
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
19
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
20
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
21
|
-
*/
|
|
22
|
-
export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
|
|
23
|
-
static get is() {
|
|
24
|
-
return 'vaadin-time-picker-item';
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
static get styles() {
|
|
28
|
-
return css`
|
|
29
|
-
:host {
|
|
30
|
-
display: block;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:host([hidden]) {
|
|
34
|
-
display: none !important;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/** @protected */
|
|
40
|
-
render() {
|
|
41
|
-
return html`
|
|
42
|
-
<span part="checkmark" aria-hidden="true"></span>
|
|
43
|
-
<div part="content">
|
|
44
|
-
<slot></slot>
|
|
45
|
-
</div>
|
|
46
|
-
`;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
defineCustomElement(TimePickerItem);
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { ComboBoxOverlayMixin } from '@vaadin/combo-box/src/vaadin-combo-box-overlay-mixin.js';
|
|
8
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
|
-
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
10
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
|
-
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
12
|
-
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
13
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
-
|
|
15
|
-
const timePickerOverlayStyles = css`
|
|
16
|
-
#overlay {
|
|
17
|
-
width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
[part='content'] {
|
|
21
|
-
display: flex;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
height: 100%;
|
|
24
|
-
}
|
|
25
|
-
`;
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
|
|
29
|
-
*
|
|
30
|
-
* @extends HTMLElement
|
|
31
|
-
* @mixes ComboBoxOverlayMixin
|
|
32
|
-
* @mixes DirMixin
|
|
33
|
-
* @mixes OverlayMixin
|
|
34
|
-
* @mixes ThemableMixin
|
|
35
|
-
* @private
|
|
36
|
-
*/
|
|
37
|
-
export class TimePickerOverlay extends ComboBoxOverlayMixin(
|
|
38
|
-
OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
|
|
39
|
-
) {
|
|
40
|
-
static get is() {
|
|
41
|
-
return 'vaadin-time-picker-overlay';
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
static get styles() {
|
|
45
|
-
return [overlayStyles, timePickerOverlayStyles];
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/** @protected */
|
|
49
|
-
render() {
|
|
50
|
-
return html`
|
|
51
|
-
<div id="backdrop" part="backdrop" hidden></div>
|
|
52
|
-
<div part="overlay" id="overlay">
|
|
53
|
-
<div part="loader"></div>
|
|
54
|
-
<div part="content" id="content"><slot></slot></div>
|
|
55
|
-
</div>
|
|
56
|
-
`;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
defineCustomElement(TimePickerOverlay);
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2015 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { ComboBoxScrollerMixin } from '@vaadin/combo-box/src/vaadin-combo-box-scroller-mixin.js';
|
|
8
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* An element used internally by `<vaadin-time-picker>`. Not intended to be used separately.
|
|
13
|
-
*
|
|
14
|
-
* @extends HTMLElement
|
|
15
|
-
* @mixes ComboBoxScrollerMixin
|
|
16
|
-
* @private
|
|
17
|
-
*/
|
|
18
|
-
export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
|
|
19
|
-
static get is() {
|
|
20
|
-
return 'vaadin-time-picker-scroller';
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
static get styles() {
|
|
24
|
-
return css`
|
|
25
|
-
:host {
|
|
26
|
-
display: block;
|
|
27
|
-
min-height: 1px;
|
|
28
|
-
overflow: auto;
|
|
29
|
-
|
|
30
|
-
/* Fixes item background from getting on top of scrollbars on Safari */
|
|
31
|
-
transform: translate3d(0, 0, 0);
|
|
32
|
-
|
|
33
|
-
/* Enable momentum scrolling on iOS */
|
|
34
|
-
-webkit-overflow-scrolling: touch;
|
|
35
|
-
|
|
36
|
-
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
|
|
37
|
-
box-shadow: 0 0 0 white;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
#selector {
|
|
41
|
-
border-width: var(--_vaadin-time-picker-items-container-border-width);
|
|
42
|
-
border-style: var(--_vaadin-time-picker-items-container-border-style);
|
|
43
|
-
border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
|
|
44
|
-
position: relative;
|
|
45
|
-
}
|
|
46
|
-
`;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/** @protected */
|
|
50
|
-
render() {
|
|
51
|
-
return html`
|
|
52
|
-
<div id="selector">
|
|
53
|
-
<slot></slot>
|
|
54
|
-
</div>
|
|
55
|
-
`;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
defineCustomElement(TimePickerScroller);
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/input-container/src/vaadin-lit-input-container.js';
|
|
7
|
-
import './vaadin-lit-time-picker-combo-box.js';
|
|
8
|
-
import { css, html, LitElement } from 'lit';
|
|
9
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
|
-
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
|
-
import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
|
|
14
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
-
import { TimePickerMixin } from './vaadin-time-picker-mixin.js';
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* LitElement based version of `<vaadin-time-picker>` web component.
|
|
19
|
-
*
|
|
20
|
-
* ## Disclaimer
|
|
21
|
-
*
|
|
22
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
23
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
24
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
25
|
-
*/
|
|
26
|
-
class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
|
|
27
|
-
static get is() {
|
|
28
|
-
return 'vaadin-time-picker';
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
static get styles() {
|
|
32
|
-
return [
|
|
33
|
-
inputFieldShared,
|
|
34
|
-
css`
|
|
35
|
-
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
|
|
36
|
-
:host([dir='rtl']) [part='input-field'] {
|
|
37
|
-
direction: ltr;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
|
|
41
|
-
direction: rtl;
|
|
42
|
-
text-align: left;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
[part~='toggle-button'] {
|
|
46
|
-
cursor: pointer;
|
|
47
|
-
}
|
|
48
|
-
`,
|
|
49
|
-
];
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/** @protected */
|
|
53
|
-
render() {
|
|
54
|
-
return html`
|
|
55
|
-
<div class="vaadin-time-picker-container">
|
|
56
|
-
<div part="label">
|
|
57
|
-
<slot name="label"></slot>
|
|
58
|
-
<span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<vaadin-time-picker-combo-box
|
|
62
|
-
id="comboBox"
|
|
63
|
-
.filteredItems="${this.__dropdownItems}"
|
|
64
|
-
.value="${this._comboBoxValue}"
|
|
65
|
-
.opened="${this.opened}"
|
|
66
|
-
.disabled="${this.disabled}"
|
|
67
|
-
.readonly="${this.readonly}"
|
|
68
|
-
.clearButtonVisible="${this.clearButtonVisible}"
|
|
69
|
-
.autoOpenDisabled="${this.autoOpenDisabled}"
|
|
70
|
-
.overlayClass="${this.overlayClass}"
|
|
71
|
-
.positionTarget="${this._inputContainer}"
|
|
72
|
-
theme="${ifDefined(this._theme)}"
|
|
73
|
-
@value-changed="${this.__onComboBoxValueChanged}"
|
|
74
|
-
@opened-changed="${this.__onComboBoxOpenedChanged}"
|
|
75
|
-
@change="${this.__onComboBoxChange}"
|
|
76
|
-
>
|
|
77
|
-
<vaadin-input-container
|
|
78
|
-
part="input-field"
|
|
79
|
-
.readonly="${this.readonly}"
|
|
80
|
-
.disabled="${this.disabled}"
|
|
81
|
-
.invalid="${this.invalid}"
|
|
82
|
-
theme="${ifDefined(this._theme)}"
|
|
83
|
-
>
|
|
84
|
-
<slot name="prefix" slot="prefix"></slot>
|
|
85
|
-
<slot name="input"></slot>
|
|
86
|
-
<div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
|
|
87
|
-
<div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix" aria-hidden="true"></div>
|
|
88
|
-
</vaadin-input-container>
|
|
89
|
-
</vaadin-time-picker-combo-box>
|
|
90
|
-
|
|
91
|
-
<div part="helper-text">
|
|
92
|
-
<slot name="helper"></slot>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div part="error-message">
|
|
96
|
-
<slot name="error-message"></slot>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
|
|
100
|
-
<slot name="tooltip"></slot>
|
|
101
|
-
`;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/** @private */
|
|
105
|
-
__onComboBoxOpenedChanged(event) {
|
|
106
|
-
this.opened = event.detail.value;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/** @private */
|
|
110
|
-
__onComboBoxValueChanged(event) {
|
|
111
|
-
this._comboBoxValue = event.detail.value;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
defineCustomElement(TimePicker);
|
|
116
|
-
|
|
117
|
-
export { TimePicker };
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
|
|
7
|
-
import '@vaadin/vaadin-material-styles/font-icons.js';
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
|
|
7
|
-
import '@vaadin/vaadin-material-styles/font-icons.js';
|
|
8
|
-
import { comboBoxItem } from '@vaadin/combo-box/theme/material/vaadin-combo-box-item-styles.js';
|
|
9
|
-
import { comboBoxOverlay } from '@vaadin/combo-box/theme/material/vaadin-combo-box-overlay-styles.js';
|
|
10
|
-
import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
|
|
11
|
-
import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
|
|
12
|
-
import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
|
|
13
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
-
|
|
15
|
-
registerStyles('vaadin-time-picker-item', [item, comboBoxItem], {
|
|
16
|
-
moduleId: 'material-time-picker-item',
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
registerStyles(
|
|
20
|
-
'vaadin-time-picker-overlay',
|
|
21
|
-
[
|
|
22
|
-
menuOverlay,
|
|
23
|
-
comboBoxOverlay,
|
|
24
|
-
css`
|
|
25
|
-
:host {
|
|
26
|
-
--_vaadin-time-picker-items-container-border-width: 8px 0;
|
|
27
|
-
--_vaadin-time-picker-items-container-border-style: solid;
|
|
28
|
-
}
|
|
29
|
-
`,
|
|
30
|
-
],
|
|
31
|
-
{
|
|
32
|
-
moduleId: 'material-time-picker-overlay',
|
|
33
|
-
},
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
const timePicker = css`
|
|
37
|
-
[part~='toggle-button']::before {
|
|
38
|
-
content: var(--material-icons-clock);
|
|
39
|
-
}
|
|
40
|
-
`;
|
|
41
|
-
|
|
42
|
-
registerStyles('vaadin-time-picker', [inputFieldShared, timePicker], { moduleId: 'material-time-picker' });
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-time-picker.js';
|