@vaadin/time-picker 24.8.5 → 24.9.0-alpha2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -13
- 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 -68
- 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/vaadin-lit-time-picker.d.ts +0 -1
- package/vaadin-lit-time-picker.js +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/time-picker",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.9.0-alpha2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,20 +37,20 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/combo-box": "
|
|
41
|
-
"@vaadin/component-base": "
|
|
42
|
-
"@vaadin/field-base": "
|
|
43
|
-
"@vaadin/input-container": "
|
|
44
|
-
"@vaadin/item": "
|
|
45
|
-
"@vaadin/overlay": "
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
47
|
-
"@vaadin/vaadin-material-styles": "
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/combo-box": "24.9.0-alpha2",
|
|
41
|
+
"@vaadin/component-base": "24.9.0-alpha2",
|
|
42
|
+
"@vaadin/field-base": "24.9.0-alpha2",
|
|
43
|
+
"@vaadin/input-container": "24.9.0-alpha2",
|
|
44
|
+
"@vaadin/item": "24.9.0-alpha2",
|
|
45
|
+
"@vaadin/overlay": "24.9.0-alpha2",
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "24.9.0-alpha2",
|
|
47
|
+
"@vaadin/vaadin-material-styles": "24.9.0-alpha2",
|
|
48
|
+
"@vaadin/vaadin-themable-mixin": "24.9.0-alpha2",
|
|
49
49
|
"lit": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vaadin/chai-plugins": "
|
|
53
|
-
"@vaadin/test-runner-commands": "
|
|
52
|
+
"@vaadin/chai-plugins": "24.9.0-alpha2",
|
|
53
|
+
"@vaadin/test-runner-commands": "24.9.0-alpha2",
|
|
54
54
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
55
55
|
"sinon": "^18.0.0"
|
|
56
56
|
},
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"web-types.json",
|
|
59
59
|
"web-types.lit.json"
|
|
60
60
|
],
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "dd99dece1b54942ab0e421892b089e506822c5f5"
|
|
62
62
|
}
|
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": "24.
|
|
4
|
+
"version": "24.9.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-time-picker",
|
|
11
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-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/24.
|
|
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/24.9.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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": "24.
|
|
4
|
+
"version": "24.9.0-alpha2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-time-picker",
|
|
19
|
-
"description": "`<vaadin-time-picker>` is a Web Component providing a time-selection field.\n\n```html\n<vaadin-time-picker></vaadin-time-picker>\n```\n```js\ntimePicker.value = '14:30';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-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/24.
|
|
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/24.9.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description\n----------|------------------------------------------\n`opened` | Set when the time-picker dropdown is open\n\n### Internal components\n\nIn addition to `<vaadin-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-time-picker-combo-box>` - has the same API as [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-combo-box-light).\n- `<vaadin-time-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-overlay).\n- `<vaadin-time-picker-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.9.0-alpha2/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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,68 +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
|
-
* An item element used by the `<vaadin-time-picker>` dropdown.
|
|
15
|
-
*
|
|
16
|
-
* ### Styling
|
|
17
|
-
*
|
|
18
|
-
* The following shadow DOM parts are available for styling:
|
|
19
|
-
*
|
|
20
|
-
* Part name | Description
|
|
21
|
-
* ------------|--------------
|
|
22
|
-
* `checkmark` | The graphical checkmark shown for a selected item
|
|
23
|
-
* `content` | The element that wraps the item content
|
|
24
|
-
*
|
|
25
|
-
* The following state attributes are exposed for styling:
|
|
26
|
-
*
|
|
27
|
-
* Attribute | Description
|
|
28
|
-
* -------------|-------------
|
|
29
|
-
* `selected` | Set when the item is selected
|
|
30
|
-
* `focused` | Set when the item is focused
|
|
31
|
-
*
|
|
32
|
-
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
33
|
-
*
|
|
34
|
-
* @customElement
|
|
35
|
-
* @mixes ComboBoxItemMixin
|
|
36
|
-
* @mixes ThemableMixin
|
|
37
|
-
* @mixes DirMixin
|
|
38
|
-
* @private
|
|
39
|
-
*/
|
|
40
|
-
export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
|
|
41
|
-
static get is() {
|
|
42
|
-
return 'vaadin-time-picker-item';
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
static get styles() {
|
|
46
|
-
return css`
|
|
47
|
-
:host {
|
|
48
|
-
display: block;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
:host([hidden]) {
|
|
52
|
-
display: none !important;
|
|
53
|
-
}
|
|
54
|
-
`;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/** @protected */
|
|
58
|
-
render() {
|
|
59
|
-
return html`
|
|
60
|
-
<span part="checkmark" aria-hidden="true"></span>
|
|
61
|
-
<div part="content">
|
|
62
|
-
<slot></slot>
|
|
63
|
-
</div>
|
|
64
|
-
`;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
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 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-time-picker.js';
|