@vaadin/dialog 25.1.0-beta2 → 25.1.0-beta4

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.
Files changed (8) hide show
  1. package/custom-elements.json +13 -1
  2. package/package.json +12 -12
  3. package/src/styles/vaadin-dialog-overlay-base-styles.js +1 -0
  4. package/src/vaadin-dialog-renderer-mixin.js +3 -1
  5. package/src/vaadin-dialog.d.ts +1 -0
  6. package/src/vaadin-dialog.js +1 -0
  7. package/web-types.json +2 -2
  8. package/web-types.lit.json +2 -2
package/custom-elements.json CHANGED
@@ -738,6 +738,9 @@
738
738
  "kind": "field",
739
739
  "name": "headerTitle",
740
740
  "privacy": "public",
741
+ "type": {
742
+ "text": "string"
743
+ },
741
744
  "description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
742
745
  "attribute": "header-title"
743
746
  },
@@ -776,6 +779,9 @@
776
779
  },
777
780
  {
778
781
  "name": "header-title",
782
+ "type": {
783
+ "text": "string"
784
+ },
779
785
  "description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
780
786
  "fieldName": "headerTitle"
781
787
  },
@@ -940,7 +946,7 @@
940
946
  "declarations": [
941
947
  {
942
948
  "kind": "class",
943
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
949
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
944
950
  "name": "Dialog",
945
951
  "members": [
946
952
  {
@@ -989,6 +995,9 @@
989
995
  "kind": "field",
990
996
  "name": "headerTitle",
991
997
  "privacy": "public",
998
+ "type": {
999
+ "text": "string"
1000
+ },
992
1001
  "description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
993
1002
  "attribute": "header-title",
994
1003
  "inheritedFrom": {
@@ -1332,6 +1341,9 @@
1332
1341
  },
1333
1342
  {
1334
1343
  "name": "header-title",
1344
+ "type": {
1345
+ "text": "string"
1346
+ },
1335
1347
  "description": "String used for rendering a dialog title.\n\nIf both `headerTitle` and `headerRenderer` are defined, the title\nand the elements created by the renderer will be placed next to\neach other, with the title coming first.\n\nWhen `headerTitle` is set, the attribute `has-title` is set on the dialog.",
1336
1348
  "fieldName": "headerTitle",
1337
1349
  "inheritedFrom": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dialog",
3
- "version": "25.1.0-beta2",
3
+ "version": "25.1.0-beta4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -37,25 +37,25 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@open-wc/dedupe-mixin": "^1.3.0",
40
- "@vaadin/component-base": "25.1.0-beta2",
41
- "@vaadin/lit-renderer": "25.1.0-beta2",
42
- "@vaadin/overlay": "25.1.0-beta2",
43
- "@vaadin/vaadin-themable-mixin": "25.1.0-beta2",
40
+ "@vaadin/component-base": "25.1.0-beta4",
41
+ "@vaadin/lit-renderer": "25.1.0-beta4",
42
+ "@vaadin/overlay": "25.1.0-beta4",
43
+ "@vaadin/vaadin-themable-mixin": "25.1.0-beta4",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/a11y-base": "25.1.0-beta2",
48
- "@vaadin/aura": "25.1.0-beta2",
49
- "@vaadin/chai-plugins": "25.1.0-beta2",
50
- "@vaadin/test-runner-commands": "25.1.0-beta2",
47
+ "@vaadin/a11y-base": "25.1.0-beta4",
48
+ "@vaadin/aura": "25.1.0-beta4",
49
+ "@vaadin/chai-plugins": "25.1.0-beta4",
50
+ "@vaadin/test-runner-commands": "25.1.0-beta4",
51
51
  "@vaadin/testing-helpers": "^2.0.0",
52
- "@vaadin/vaadin-lumo-styles": "25.1.0-beta2",
53
- "sinon": "^21.0.0"
52
+ "@vaadin/vaadin-lumo-styles": "25.1.0-beta4",
53
+ "sinon": "^21.0.2"
54
54
  },
55
55
  "customElements": "custom-elements.json",
56
56
  "web-types": [
57
57
  "web-types.json",
58
58
  "web-types.lit.json"
59
59
  ],
60
- "gitHead": "ffbedbae08a5160d13bcd1c6fcaa328df5103a05"
60
+ "gitHead": "b27f6706a2b5c07cedec353fccbdecee95d53024"
61
61
  }
package/src/styles/vaadin-dialog-overlay-base-styles.js CHANGED
@@ -29,6 +29,7 @@ export const dialogOverlayBase = css`
29
29
  }
30
30
 
31
31
  [part='overlay'] {
32
+ color: var(--vaadin-dialog-text-color, var(--vaadin-overlay-text-color, var(--vaadin-text-color)));
32
33
  background: var(--vaadin-dialog-background, var(--vaadin-overlay-background, var(--vaadin-background-color)));
33
34
  background-origin: border-box;
34
35
  border: var(--vaadin-dialog-border-width, var(--vaadin-overlay-border-width, 1px)) solid
package/src/vaadin-dialog-renderer-mixin.js CHANGED
@@ -33,7 +33,9 @@ export const DialogRendererMixin = (superClass) =>
33
33
  * When `headerTitle` is set, the attribute `has-title` is set on the dialog.
34
34
  * @attr {string} header-title
35
35
  */
36
- headerTitle: String,
36
+ headerTitle: {
37
+ type: String,
38
+ },
37
39
 
38
40
  /**
39
41
  * Custom function for rendering the dialog header.
package/src/vaadin-dialog.d.ts CHANGED
@@ -137,6 +137,7 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
137
137
  * |`--vaadin-dialog-min-width` |
138
138
  * |`--vaadin-dialog-padding` |
139
139
  * |`--vaadin-dialog-shadow` |
140
+ * |`--vaadin-dialog-text-color` |
140
141
  * |`--vaadin-dialog-title-color` |
141
142
  * |`--vaadin-dialog-title-font-size` |
142
143
  * |`--vaadin-dialog-title-font-weight` |
package/src/vaadin-dialog.js CHANGED
@@ -80,6 +80,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
80
80
  * |`--vaadin-dialog-min-width` |
81
81
  * |`--vaadin-dialog-padding` |
82
82
  * |`--vaadin-dialog-shadow` |
83
+ * |`--vaadin-dialog-text-color` |
83
84
  * |`--vaadin-dialog-title-color` |
84
85
  * |`--vaadin-dialog-title-font-size` |
85
86
  * |`--vaadin-dialog-title-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/dialog",
4
- "version": "25.1.0-beta2",
4
+ "version": "25.1.0-beta4",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-dialog",
11
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "draggable",
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/dialog",
4
- "version": "25.1.0-beta2",
4
+ "version": "25.1.0-beta4",
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-dialog",
19
- "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-dialog>` is a Web Component for creating customized modal dialogs.\n\n### Rendering\n\nThe content of the dialog can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `dialog` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `dialog`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-dialog id=\"dialog\"></vaadin-dialog>\n```\n```js\nconst dialog = document.querySelector('#dialog');\ndialog.renderer = function(root, dialog) {\n root.textContent = \"Sample dialog\";\n};\n```\n\nRenderer is called on the opening of the dialog.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n`header` | Element wrapping title and header content\n`header-content` | Element wrapping the header content slot\n`title` | Element wrapping the title slot\n`footer` | Element wrapping the footer slot\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|--------------------------------------------\n`has-title` | Set when the element has a title\n`has-header` | Set when the element has header renderer\n`has-footer` | Set when the element has footer renderer\n`overflow` | Set to `top`, `bottom`, none or both\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------|\n|`--vaadin-dialog-background` |\n|`--vaadin-dialog-border-color` |\n|`--vaadin-dialog-border-radius` |\n|`--vaadin-dialog-border-width` |\n|`--vaadin-dialog-max-width` |\n|`--vaadin-dialog-min-width` |\n|`--vaadin-dialog-padding` |\n|`--vaadin-dialog-shadow` |\n|`--vaadin-dialog-text-color` |\n|`--vaadin-dialog-title-color` |\n|`--vaadin-dialog-title-font-size` |\n|`--vaadin-dialog-title-font-weight` |\n|`--vaadin-dialog-title-line-height` |\n|`--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {