@vaadin/dialog 24.6.0-alpha3 → 24.6.0-alpha5

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 (10) hide show
  1. package/package.json +11 -11
  2. package/src/vaadin-dialog-base-mixin.d.ts +32 -0
  3. package/src/vaadin-dialog-base-mixin.js +54 -0
  4. package/src/vaadin-dialog-draggable-mixin.js +11 -1
  5. package/src/vaadin-dialog-overlay-mixin.js +1 -1
  6. package/src/vaadin-dialog-resizable-mixin.js +9 -7
  7. package/src/vaadin-dialog.d.ts +15 -0
  8. package/src/vaadin-dialog.js +1 -0
  9. package/web-types.json +94 -2
  10. package/web-types.lit.json +37 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/dialog",
3
- "version": "24.6.0-alpha3",
3
+ "version": "24.6.0-alpha5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -39,24 +39,24 @@
39
39
  "dependencies": {
40
40
  "@open-wc/dedupe-mixin": "^1.3.0",
41
41
  "@polymer/polymer": "^3.0.0",
42
- "@vaadin/component-base": "24.6.0-alpha3",
43
- "@vaadin/lit-renderer": "24.6.0-alpha3",
44
- "@vaadin/overlay": "24.6.0-alpha3",
45
- "@vaadin/vaadin-lumo-styles": "24.6.0-alpha3",
46
- "@vaadin/vaadin-material-styles": "24.6.0-alpha3",
47
- "@vaadin/vaadin-themable-mixin": "24.6.0-alpha3",
42
+ "@vaadin/component-base": "24.6.0-alpha5",
43
+ "@vaadin/lit-renderer": "24.6.0-alpha5",
44
+ "@vaadin/overlay": "24.6.0-alpha5",
45
+ "@vaadin/vaadin-lumo-styles": "24.6.0-alpha5",
46
+ "@vaadin/vaadin-material-styles": "24.6.0-alpha5",
47
+ "@vaadin/vaadin-themable-mixin": "24.6.0-alpha5",
48
48
  "lit": "^3.0.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@vaadin/a11y-base": "24.6.0-alpha3",
52
- "@vaadin/chai-plugins": "24.6.0-alpha3",
51
+ "@vaadin/a11y-base": "24.6.0-alpha5",
52
+ "@vaadin/chai-plugins": "24.6.0-alpha5",
53
53
  "@vaadin/testing-helpers": "^1.0.0",
54
- "@vaadin/text-area": "24.6.0-alpha3",
54
+ "@vaadin/text-area": "24.6.0-alpha5",
55
55
  "sinon": "^18.0.0"
56
56
  },
57
57
  "web-types": [
58
58
  "web-types.json",
59
59
  "web-types.lit.json"
60
60
  ],
61
- "gitHead": "f917e587caaf86b3d55598233811409b0f34ff69"
61
+ "gitHead": "cbfa46fe276f254dcaa99a622710d56df7f0a539"
62
62
  }
package/src/vaadin-dialog-base-mixin.d.ts CHANGED
@@ -38,4 +38,36 @@ export declare class DialogBaseMixinClass {
38
38
  * @attr {string} overlay-role
39
39
  */
40
40
  overlayRole: string;
41
+
42
+ /**
43
+ * Set the distance of the overlay from the top of its container.
44
+ * If a unitless number is provided, pixels are assumed.
45
+ *
46
+ * Note that the overlay top edge may not be the same as the viewport
47
+ * top edge (e.g. the Lumo theme defines some spacing to prevent the
48
+ * overlay from stretching all the way to the top of the viewport).
49
+ */
50
+ top: string;
51
+
52
+ /**
53
+ * Set the distance of the overlay from the left of its container.
54
+ * If a unitless number is provided, pixels are assumed.
55
+ *
56
+ * Note that the overlay left edge may not be the same as the viewport
57
+ * left edge (e.g. the Lumo theme defines some spacing to prevent the
58
+ * overlay from stretching all the way to the left of the viewport).
59
+ */
60
+ left: string;
61
+
62
+ /**
63
+ * Set the width of the overlay.
64
+ * If a unitless number is provided, pixels are assumed.
65
+ */
66
+ width: string;
67
+
68
+ /**
69
+ * Set the height of the overlay.
70
+ * If a unitless number is provided, pixels are assumed.
71
+ */
72
+ height: string;
41
73
  }
package/src/vaadin-dialog-base-mixin.js CHANGED
@@ -50,6 +50,46 @@ export const DialogBaseMixin = (superClass) =>
50
50
  value: false,
51
51
  },
52
52
 
53
+ /**
54
+ * Set the distance of the overlay from the top of its container.
55
+ * If a unitless number is provided, pixels are assumed.
56
+ *
57
+ * Note that the overlay top edge may not be the same as the viewport
58
+ * top edge (e.g. the Lumo theme defines some spacing to prevent the
59
+ * overlay from stretching all the way to the top of the viewport).
60
+ */
61
+ top: {
62
+ type: String,
63
+ },
64
+
65
+ /**
66
+ * Set the distance of the overlay from the left of its container.
67
+ * If a unitless number is provided, pixels are assumed.
68
+ *
69
+ * Note that the overlay left edge may not be the same as the viewport
70
+ * left edge (e.g. the Lumo theme defines some spacing to prevent the
71
+ * overlay from stretching all the way to the left of the viewport).
72
+ */
73
+ left: {
74
+ type: String,
75
+ },
76
+
77
+ /**
78
+ * Set the width of the overlay.
79
+ * If a unitless number is provided, pixels are assumed.
80
+ */
81
+ width: {
82
+ type: String,
83
+ },
84
+
85
+ /**
86
+ * Set the height of the overlay.
87
+ * If a unitless number is provided, pixels are assumed.
88
+ */
89
+ height: {
90
+ type: String,
91
+ },
92
+
53
93
  /**
54
94
  * The `role` attribute value to be set on the overlay. Defaults to "dialog".
55
95
  *
@@ -62,6 +102,10 @@ export const DialogBaseMixin = (superClass) =>
62
102
  };
63
103
  }
64
104
 
105
+ static get observers() {
106
+ return ['__positionChanged(top, left)', '__sizeChanged(width, height)'];
107
+ }
108
+
65
109
  /** @protected */
66
110
  ready() {
67
111
  super.ready();
@@ -137,6 +181,16 @@ export const DialogBaseMixin = (superClass) =>
137
181
  }
138
182
  }
139
183
 
184
+ /** @private */
185
+ __positionChanged(top, left) {
186
+ requestAnimationFrame(() => this.$.overlay.setBounds({ top, left }));
187
+ }
188
+
189
+ /** @private */
190
+ __sizeChanged(width, height) {
191
+ requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }));
192
+ }
193
+
140
194
  /**
141
195
  * Fired when the dialog is closed.
142
196
  *
package/src/vaadin-dialog-draggable-mixin.js CHANGED
@@ -109,15 +109,25 @@ export const DialogDraggableMixin = (superClass) =>
109
109
  if (eventInWindow(event)) {
110
110
  const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
111
111
  const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
112
- this.$.overlay.setBounds({ top, left });
112
+ this.top = top;
113
+ this.left = left;
113
114
  }
114
115
  }
115
116
 
116
117
  /** @private */
117
118
  _stopDrag() {
119
+ this.dispatchEvent(
120
+ new CustomEvent('dragged', { bubbles: true, composed: true, detail: { top: this.top, left: this.left } }),
121
+ );
118
122
  window.removeEventListener('mouseup', this._stopDrag);
119
123
  window.removeEventListener('touchend', this._stopDrag);
120
124
  window.removeEventListener('mousemove', this._drag);
121
125
  window.removeEventListener('touchmove', this._drag);
122
126
  }
127
+
128
+ /**
129
+ * Fired when the dialog drag is finished.
130
+ *
131
+ * @event dragged
132
+ */
123
133
  };
package/src/vaadin-dialog-overlay-mixin.js CHANGED
@@ -207,7 +207,7 @@ export const DialogOverlayMixin = (superClass) =>
207
207
  }
208
208
 
209
209
  Object.keys(parsedBounds).forEach((arg) => {
210
- if (typeof parsedBounds[arg] === 'number') {
210
+ if (!isNaN(parsedBounds[arg])) {
211
211
  parsedBounds[arg] = `${parsedBounds[arg]}px`;
212
212
  }
213
213
  });
package/src/vaadin-dialog-resizable-mixin.js CHANGED
@@ -75,7 +75,7 @@ export const DialogResizableMixin = (superClass) =>
75
75
  window.addEventListener('touchmove', this._resizeListeners.resize[direction]);
76
76
  window.addEventListener('mouseup', this._resizeListeners.stop[direction]);
77
77
  window.addEventListener('touchend', this._resizeListeners.stop[direction]);
78
- if (this.$.overlay.$.overlay.style.position !== 'absolute') {
78
+ if (this.$.overlay.$.overlay.style.position !== 'absolute' || this.width || this.height) {
79
79
  this.$.overlay.setBounds(this._originalBounds);
80
80
  }
81
81
  }
@@ -96,21 +96,22 @@ export const DialogResizableMixin = (superClass) =>
96
96
  const height = this._originalBounds.height - (event.pageY - this._originalMouseCoords.top);
97
97
  const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
98
98
  if (height > minimumSize) {
99
- this.$.overlay.setBounds({ top, height });
99
+ this.top = top;
100
+ this.height = height;
100
101
  }
101
102
  break;
102
103
  }
103
104
  case 'e': {
104
105
  const width = this._originalBounds.width + (event.pageX - this._originalMouseCoords.left);
105
106
  if (width > minimumSize) {
106
- this.$.overlay.setBounds({ width });
107
+ this.width = width;
107
108
  }
108
109
  break;
109
110
  }
110
111
  case 's': {
111
112
  const height = this._originalBounds.height + (event.pageY - this._originalMouseCoords.top);
112
113
  if (height > minimumSize) {
113
- this.$.overlay.setBounds({ height });
114
+ this.height = height;
114
115
  }
115
116
  break;
116
117
  }
@@ -118,7 +119,8 @@ export const DialogResizableMixin = (superClass) =>
118
119
  const width = this._originalBounds.width - (event.pageX - this._originalMouseCoords.left);
119
120
  const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
120
121
  if (width > minimumSize) {
121
- this.$.overlay.setBounds({ left, width });
122
+ this.left = left;
123
+ this.width = width;
122
124
  }
123
125
  break;
124
126
  }
@@ -147,7 +149,7 @@ export const DialogResizableMixin = (superClass) =>
147
149
  */
148
150
  _getResizeDimensions() {
149
151
  const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
150
- const { width, height } = getComputedStyle(this.$.overlay.$.overlay);
152
+ const { width, height, top, left } = getComputedStyle(this.$.overlay.$.overlay);
151
153
  const content = this.$.overlay.$.content;
152
154
  content.setAttribute(
153
155
  'style',
@@ -156,7 +158,7 @@ export const DialogResizableMixin = (superClass) =>
156
158
  const { width: contentWidth, height: contentHeight } = getComputedStyle(content);
157
159
  content.removeAttribute('style');
158
160
  this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
159
- return { width, height, contentWidth, contentHeight };
161
+ return { width, height, contentWidth, contentHeight, top, left };
160
162
  }
161
163
 
162
164
  /**
package/src/vaadin-dialog.d.ts CHANGED
@@ -22,6 +22,13 @@ export type DialogResizeDimensions = {
22
22
  height: string;
23
23
  contentWidth: string;
24
24
  contentHeight: string;
25
+ top: string;
26
+ left: string;
27
+ };
28
+
29
+ export type DialogPosition = {
30
+ top: string;
31
+ left: string;
25
32
  };
26
33
 
27
34
  /**
@@ -34,6 +41,11 @@ export type DialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
34
41
  */
35
42
  export type DialogResizeEvent = CustomEvent<DialogResizeDimensions>;
36
43
 
44
+ /**
45
+ * Fired when the dialog drag is finished.
46
+ */
47
+ export type DialogDraggedEvent = CustomEvent<DialogPosition>;
48
+
37
49
  /**
38
50
  * Fired when the dialog is closed.
39
51
  */
@@ -45,6 +57,8 @@ export interface DialogCustomEventMap {
45
57
  closed: DialogClosedEvent;
46
58
 
47
59
  resize: DialogResizeEvent;
60
+
61
+ dragged: DialogDraggedEvent;
48
62
  }
49
63
 
50
64
  export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
@@ -108,6 +122,7 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
108
122
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
109
123
  *
110
124
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
125
+ * @fires {CustomEvent} dragged - Fired when the dialog drag is finished.
111
126
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
112
127
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
113
128
  */
package/src/vaadin-dialog.js CHANGED
@@ -76,6 +76,7 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
76
76
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
77
77
  *
78
78
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
79
+ * @fires {CustomEvent} dragged - Fired when the dialog drag is finished.
79
80
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
80
81
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
81
82
  *
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": "24.6.0-alpha3",
4
+ "version": "24.6.0-alpha5",
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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha3/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "opened",
@@ -46,6 +46,50 @@
46
46
  ]
47
47
  }
48
48
  },
49
+ {
50
+ "name": "top",
51
+ "description": "Set the distance of the overlay from the top of its container.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the overlay top edge may not be the same as the viewport\ntop edge (e.g. the Lumo theme defines some spacing to prevent the\noverlay from stretching all the way to the top of the viewport).",
52
+ "value": {
53
+ "type": [
54
+ "string",
55
+ "null",
56
+ "undefined"
57
+ ]
58
+ }
59
+ },
60
+ {
61
+ "name": "left",
62
+ "description": "Set the distance of the overlay from the left of its container.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the overlay left edge may not be the same as the viewport\nleft edge (e.g. the Lumo theme defines some spacing to prevent the\noverlay from stretching all the way to the left of the viewport).",
63
+ "value": {
64
+ "type": [
65
+ "string",
66
+ "null",
67
+ "undefined"
68
+ ]
69
+ }
70
+ },
71
+ {
72
+ "name": "width",
73
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
74
+ "value": {
75
+ "type": [
76
+ "string",
77
+ "null",
78
+ "undefined"
79
+ ]
80
+ }
81
+ },
82
+ {
83
+ "name": "height",
84
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
85
+ "value": {
86
+ "type": [
87
+ "string",
88
+ "null",
89
+ "undefined"
90
+ ]
91
+ }
92
+ },
49
93
  {
50
94
  "name": "overlay-role",
51
95
  "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
@@ -158,6 +202,50 @@
158
202
  ]
159
203
  }
160
204
  },
205
+ {
206
+ "name": "top",
207
+ "description": "Set the distance of the overlay from the top of its container.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the overlay top edge may not be the same as the viewport\ntop edge (e.g. the Lumo theme defines some spacing to prevent the\noverlay from stretching all the way to the top of the viewport).",
208
+ "value": {
209
+ "type": [
210
+ "string",
211
+ "null",
212
+ "undefined"
213
+ ]
214
+ }
215
+ },
216
+ {
217
+ "name": "left",
218
+ "description": "Set the distance of the overlay from the left of its container.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the overlay left edge may not be the same as the viewport\nleft edge (e.g. the Lumo theme defines some spacing to prevent the\noverlay from stretching all the way to the left of the viewport).",
219
+ "value": {
220
+ "type": [
221
+ "string",
222
+ "null",
223
+ "undefined"
224
+ ]
225
+ }
226
+ },
227
+ {
228
+ "name": "width",
229
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
230
+ "value": {
231
+ "type": [
232
+ "string",
233
+ "null",
234
+ "undefined"
235
+ ]
236
+ }
237
+ },
238
+ {
239
+ "name": "height",
240
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
241
+ "value": {
242
+ "type": [
243
+ "string",
244
+ "null",
245
+ "undefined"
246
+ ]
247
+ }
248
+ },
161
249
  {
162
250
  "name": "overlayRole",
163
251
  "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
@@ -256,6 +344,10 @@
256
344
  "name": "closed",
257
345
  "description": "Fired when the dialog is closed."
258
346
  },
347
+ {
348
+ "name": "dragged",
349
+ "description": "Fired when the dialog drag is finished."
350
+ },
259
351
  {
260
352
  "name": "resize",
261
353
  "description": "Fired when the dialog resize is finished."
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": "24.6.0-alpha3",
4
+ "version": "24.6.0-alpha5",
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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha3/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\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\n`<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal\nthemable component as the actual visible dialog overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.6.0-alpha5/#/elements/vaadin-overlay) documentation.\nfor `<vaadin-dialog-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\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\nNote: the `theme` attribute value set on `<vaadin-dialog>` is\npropagated to the internal `<vaadin-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -61,6 +61,34 @@
61
61
  "kind": "expression"
62
62
  }
63
63
  },
64
+ {
65
+ "name": ".top",
66
+ "description": "Set the distance of the overlay from the top of its container.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the overlay top edge may not be the same as the viewport\ntop edge (e.g. the Lumo theme defines some spacing to prevent the\noverlay from stretching all the way to the top of the viewport).",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": ".left",
73
+ "description": "Set the distance of the overlay from the left of its container.\nIf a unitless number is provided, pixels are assumed.\n\nNote that the overlay left edge may not be the same as the viewport\nleft edge (e.g. the Lumo theme defines some spacing to prevent the\noverlay from stretching all the way to the left of the viewport).",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": ".width",
80
+ "description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": ".height",
87
+ "description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
64
92
  {
65
93
  "name": ".overlayRole",
66
94
  "description": "The `role` attribute value to be set on the overlay. Defaults to \"dialog\".",
@@ -117,6 +145,13 @@
117
145
  "kind": "expression"
118
146
  }
119
147
  },
148
+ {
149
+ "name": "@dragged",
150
+ "description": "Fired when the dialog drag is finished.",
151
+ "value": {
152
+ "kind": "expression"
153
+ }
154
+ },
120
155
  {
121
156
  "name": "@resize",
122
157
  "description": "Fired when the dialog resize is finished.",