@vaadin/date-time-picker 23.3.0-alpha2 → 24.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/date-time-picker",
3
- "version": "23.3.0-alpha2",
3
+ "version": "24.0.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,14 +36,14 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "23.3.0-alpha2",
40
- "@vaadin/custom-field": "23.3.0-alpha2",
41
- "@vaadin/date-picker": "23.3.0-alpha2",
42
- "@vaadin/field-base": "23.3.0-alpha2",
43
- "@vaadin/time-picker": "23.3.0-alpha2",
44
- "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
45
- "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
46
- "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
39
+ "@vaadin/component-base": "24.0.0-alpha1",
40
+ "@vaadin/custom-field": "24.0.0-alpha1",
41
+ "@vaadin/date-picker": "24.0.0-alpha1",
42
+ "@vaadin/field-base": "24.0.0-alpha1",
43
+ "@vaadin/time-picker": "24.0.0-alpha1",
44
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
45
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
46
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +54,5 @@
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
57
+ "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
58
58
  }
@@ -123,16 +123,12 @@ class DateTimePicker extends FieldMixin(
123
123
  --vaadin-field-default-width: 12em;
124
124
  }
125
125
 
126
- [part='date'],
127
126
  .slots ::slotted([slot='date-picker']) {
128
- pointer-events: all;
129
127
  min-width: 0;
130
128
  flex: 1 1 auto;
131
129
  }
132
130
 
133
- [part='time'],
134
131
  .slots ::slotted([slot='time-picker']) {
135
- pointer-events: all;
136
132
  min-width: 0;
137
133
  flex: 1 1.65 auto;
138
134
  }
@@ -464,11 +460,12 @@ class DateTimePicker extends FieldMixin(
464
460
  */
465
461
  _shouldRemoveFocus(event) {
466
462
  const target = event.relatedTarget;
463
+ const overlayContent = this.__datePicker._overlayContent;
467
464
 
468
465
  if (
469
466
  this.__datePicker.contains(target) ||
470
467
  this.__timePicker.contains(target) ||
471
- target === this.__datePicker.$.overlay
468
+ (overlayContent && overlayContent.contains(target))
472
469
  ) {
473
470
  return false;
474
471
  }
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/date-time-picker",
4
- "version": "23.3.0-alpha2",
4
+ "version": "24.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-date-time-picker",
11
- "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
11
+ "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
@@ -406,7 +406,7 @@
406
406
  },
407
407
  {
408
408
  "name": "i18n",
409
- "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-time-picker).",
409
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-time-picker).",
410
410
  "value": {
411
411
  "type": [
412
412
  "DateTimePickerI18n"
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/date-time-picker",
4
- "version": "23.3.0-alpha2",
4
+ "version": "24.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-date-time-picker",
19
- "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
19
+ "description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\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 slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nIn addition to `<vaadin-date-time-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-time-picker-date-picker>` - has the same API as [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-date-picker).\n- `<vaadin-date-time-picker-time-picker>` - has the same API as [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `<vaadin-date-time-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -147,7 +147,7 @@
147
147
  },
148
148
  {
149
149
  "name": ".i18n",
150
- "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-time-picker).",
150
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-time-picker).",
151
151
  "value": {
152
152
  "kind": "expression"
153
153
  }