feat: drag-resizing of dashboard items

[tomivirkki]

Description

Add support for drag resizing of <vaadin-dashboard> widgets

Kapture.2024-09-11.at.12.39.20.mp4

Added API:

• Events:
  • dashboard-item-resize-start: Fired when item resizing starts
    • event.item: The item being resized
  • dashboard-item-resize-end: Fired when item resizing ends
    • event.item: The item being resized
  • dashboard-item-drag-resize: Fired when an item will be resized by dragging
    • event.item: The item being resized
    • colspan: The colspan to be assigned to the item
    • rowspan: The rowspan to be assigned to the item

Fixes https://github.com/orgs/vaadin/projects/70/views/1?pane=issue&itemId=74626094

Part of vaadin/platform#6626

Type of change

Feature

[ugur-vaadin]

When the widget height gets lower, the resize handle can overlap the drag handle. Although I am not sure if this would create any problems with real widgets since it is unlikely that the widgets would get so short.

[tomivirkki]

When the widget height gets lower, the resize handle can overlap the drag handle. Although I am not sure if this would create any problems with real widgets since it is unlikely that the widgets would get so short.

Note that there's no design yet for how the widgets are going to look like eventually (where the buttons are, Lumo/Material...) so I haven't invested much on perfecting the layout either. This PR is mainly about the resizing functionality.

I added a min-height to the content for now, but we'll need to discuss that also once the designs are available.

[ugur-vaadin]

Added one comment for a typo.

[sonarcloud]

Quality Gate passed

Issues
4 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[vursen]

nit: could use hostConnected, hostDisconnected instead

[tomivirkki]

Thanks, that's a good tip. Pushed a refactor to use hostDisconnected to clean up the listener