How to Implement Swipe Gestures in Vaadin Flow and Customize Behavior

Question

I am working on a PWA project using Vaadin Flow, and I'm interested in implementing swipe gestures similar to mobile app behavior. Specifically, I want to create a UI where users can swipe left or right on an element to trigger different actions.

For example, I have a layout where each element contains text on the left and a hidden icon on the right. When a user swipes left on an element, the icon should become visible and the text should slightly move to the left, allowing the icon to take over the space. Additionally, the background color of the icon area should change to indicate the action.

I have already tried using Vaadin Flow's built-in event handling, but I'm unsure about the best approach to achieve this behavior. Can someone guide me on how to implement swipe gestures in Vaadin Flow and customize the behavior as described above?

Any help or pointers to relevant documentation or examples would be greatly appreciated. Thank you!

import com.vaadin.flow.component.Unit;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("swipe")
public class SwipeDiv extends VerticalLayout
{

    public SwipeDiv()
    {
        // Header
        Div header = new Div( );
        header.setText( "HEADER: The swipe Event" );
        add( header );

        // Content
        Div content1 = createContent( "Swipe me in the left!" );
        content1.addClassName( "swipe-content" );
        content1.getStyle( ).set( "border", "1px solid black" );
        content1.getStyle( ).set( "margin", "5px" );
        add( content1 );

        // Footer
        Div footer = new Div( );
        footer.setText( "Footer Text" );
        add( footer );

        setHorizontalComponentAlignment( Alignment.CENTER );
        setAlignItems( Alignment.CENTER );
    }

    private Div createContent(String text)
    {
        Div content = new Div( );
        content.setHeight( 50, Unit.PIXELS );
        content.setText( text );
        content.getStyle( ).set( "display", "flex" );
        content.getStyle( ).set( "align-items", "center" );
        content.getStyle( ).set( "justify-content", "space-between" );

        Div leftPart = new Div( );
        leftPart.setText( text );
        leftPart.getStyle( ).set( "flex", "1" );

        Div rightPart = new Div( );
        rightPart.getStyle( ).set( "background-color", "lightpink" );
        rightPart.getStyle( ).set( "width", "50px" );
        rightPart.getStyle( ).set( "height", "100%" );
        rightPart.getStyle( ).set( "display", "none" ); // Initially hide the trash icon

        Icon trashIcon = new Icon( "webpf", "trash" );
        trashIcon.getStyle( ).set( "width", "24px" );
        trashIcon.getStyle( ).set( "height", "24px" );
        trashIcon.getStyle( ).set( "margin", "0 10px" );

        rightPart.add( trashIcon );

        content.add( leftPart, rightPart );

        content.getElement( ).addEventListener( "swipe", event -> {
            String direction = event.getEventData( ).getString( "direction" );
            if( "left".equals( direction ) )
            {
                rightPart.getStyle( ).set( "display", "block" );
                leftPart.getStyle( ).set( "flex", "0" );
                leftPart.getStyle( ).set( "opacity", "0" );
            }
        } );

        return content;
    }
}