Enable resizing the dialog

[OlliTietavainenVaadin]

There should be an optional API for toggling user resizability of the window. This should happen by dragging the dialog from the edges or the corners as usual.

[jouni]

Notes regarding implementation:

Must have:

• Resizable from the bottom right corner (RTL handled later)
• The area from where the user can start the resize should be around 20x20px and extend slightly outside the edge of the dialog
• Mouse cursor should change when hovering on top of the corner – no other visual indication required

Should have:

• Resizable from all edges and corners (that handles RTL)

Could have:

• Resize event
• Touch device support
• Setting the width and height programmatically (related issues: setSizeFull doesn't work vaadin-dialog-flow#103, Make it clear that setWidth & setWidth relative sizing to the viewport vaadin-dialog-flow#123 and Add a note that 'setWidth' sets a width to a 'flow-component-renderer', not an overlay/dialog itself vaadin-dialog-flow#139)
  • This is potentially a breaking change for the Flow component

Details:

• Implementation should probably use the suggested setBounds(top, right, bottom, left) in Enable dragging dialog to a new position #133
• Once the user starts the resize, the dialog size should “snap to pixels”
• To keep the behavior consistent together with draggable dialogs, the dialog should start using absolute positioning once the users starts to resize it (instead of flexbox based centering)
• The user can only interact/resize with the last opened dialog when the dialog is modal
• If the dialog is modeless, the user can resize dialogs “behind” the last opened dialog, but the dialog stacking order does not change
  • This requires a separate feature for managing the stacking order / focused dialog

API:

• <vaadin-dialog resizable>
• vaadinDialog.resizable = true