[dialog] Add APIs to set position and dimension

[DiegoCardoso]

Developer could be able to set the coordinates (top, left) and dimension (width, height) of the overlay.

Two things that could be part of this:

• A draggable event after dragging is done
• Update resize event to add the top and left positions to its detail data (the reason is that so, dialog flow could sync these values on resize)

[ado2000]

Hope to see this feature in next release.

[osenbg]

When will this feature available ?

[rolfsmeds]

• We should avoid setting width/height on a postitioned-but-not-sized Dialog to avoid the problem that dragging currently has: Dialog no longer resizes automatically after dragging. #436
• The left/top position should be reflected back to the server when a drag-move ends, so that the getters return the new values and the position can be restored with @PreserveOnRefresh.
• Resize event needs to convey updated top/left coordinates as well.

[TatuLund]

It is possible to set the position using JavaScript, example is found here

https://github.com/TatuLund/mdi-demo/blob/master/src/main/java/com/example/application/components/window/Window.java#L222

[DiegoCardoso]

• We should avoid setting width/height on a postitioned-but-not-sized Dialog to avoid the problem that dragging currently has: Dialog no longer resizes automatically after dragging. #436

One problem with that is that the dragging of the dialog element can behave unexpectedly if the size is not set on drag. Take, for instance, the example in the dev/dialog.html page in our repo:

dialog-overlay-size.mp4

We set max-width in the root element (root.style.maxWidth = '40em';) passed to the renderer (which, essentially, is the vaadin-dialog-overlayelement. As can be seen at the start of the recording, the size of the element is what restricts thepart=overlayelement to expand horizontally to fit its content. When the user drags the element, since only thetopandleft` properties are being defined, the element will grow when moved to the left and shrink when it is moved to the right (until the point it no longer can shrink and the whole element will move).

If, however, we add a container to the content elements and define a size for this container instead of the root element:

      const container = document.createElement('div');
      container.style.maxWidth = '40em';
      container.style.minWidth = '20em';
      root.appendChild(container);

      // Add elements to `container`
      // ...

dialog-content-size.mp4

Then, the dragging will occur as expected with the change in the element shrinking when it moves to the right edge until it reaches its size limit.

[DiegoCardoso]

Closed as complete via #7970, #7971, #8030, #8047, vaadin/flow-components#6782, vaadin/flow-components#6783, and vaadin/flow-components#6784.