Add Draggable, Resizable and Modal APIs

vaadin-dialog-flow-demo/src/main/java/com/vaadin/flow/component/dialog/demo/DialogView.java

@@ -47,6 +47,7 @@ public void initView() {
         addCloseFromServerSideDialog();
         addDialogWithFocusedElement();
         addStyledDialogContent();
+        addModelessDraggableResizableDialog();
     }
 
     private void addBasicDialog() {
@@ -180,4 +181,35 @@ private void addStyledDialogContent() {
         button.setId("styled-content-dialog-button");
         addCard("Dialog with styled content", button);
     }
+
+    private void addModelessDraggableResizableDialog() {
+        NativeButton openDialog = new NativeButton(BUTTON_CAPTION);
+        NativeButton openSecondDialog = new NativeButton("Open another dialog");
+
+        // begin-source-example
+        // source-example-heading: Modeless Draggable Resizable Dialog
+        Dialog firstDialog = new Dialog();
+        firstDialog.add(
+            new Label("This is the first dialog"),
+            new Button("Close", e -> firstDialog.close())
+        );
+        firstDialog.setModal(false);
+        firstDialog.setDraggable(true);
+        firstDialog.setResizable(true);
+
+        Dialog secondDialog = new Dialog();
+        secondDialog.add(
+            new Label("This is the second dialog"),
+            new Button("Close", e -> secondDialog.close())
+        );
+        secondDialog.setModal(false);
+        secondDialog.setDraggable(true);
+        secondDialog.setResizable(true);
+
+        openDialog.addClickListener(e -> firstDialog.open());
+        openSecondDialog.addClickListener(e -> secondDialog.open());
+        // end-source-example
+
+        addCard("Modeless Draggable Resizable Dialog", openDialog, openSecondDialog, firstDialog);
+    }
 }

vaadin-dialog-flow/src/main/java/com/vaadin/flow/component/dialog/Dialog.java

@@ -308,6 +308,82 @@ public void close() {
         setOpened(false);
     }
 
+    /**
+     * Sets whether component will open modal or modeless dialog.
+     * <p>
+     * Note: When dialog is set to be modeless, then it's up to you to provide
+     * means for it to be closed (eg. a button that calls {@link Dialog#close()}).
+     * The reason being that a modeless dialog allows user to interact with the
+     * interface under it and won't be closed by clicking outside or the ESC key.
+     * 
+     * @param modal 
+     *          {@code false} to enable dialog to open as modeless modal,
+     *          {@code true} otherwise.
+     */
+    public void setModal(boolean modal) {
+        getElement().setProperty("modeless", !modal);
+    }
+
+    /**
+     * Gets whether component is set as modal or modeless dialog.
+     * 
+     * @return  {@code true} if modal dialog (default),
+     *          {@code false} otherwise.
+     */
+    public boolean isModal() {
+        return !getElement().getProperty("modeless", false);
+    }
+
+    /**
+     * Sets whether dialog is enabled to be dragged by the user or not.
+     * <p>
+     * Note: If draggable is enabled and dialog is opened without first
+     * being explicitly attached to a parent, then it won't restore its
+     * last position in the case the user closes and opens it again.
+     * Reason being that a self attached dialog is removed from the DOM
+     * when it's closed and position is not synched.
+     * 
+     * @param draggable 
+     *          {@code true} to enable dragging of the dialog,
+     *          {@code false} otherwise
+     */
+    public void setDraggable(boolean draggable) {
+        getElement().setProperty("draggable", draggable);
+    }
+
+    /**
+     * Gets whether dialog is enabled to be dragged or not.
+     * 
+     * @return 
+     *      {@code true} if dragging is enabled,
+     *      {@code false} otherwise (default).
+     */
+    public boolean isDaggable() {
+        return getElement().getProperty("draggable", false);
+    }
+
+    /**
+     * Sets whether dialog can be resized by user or not.
+     * 
+     * @param resizable 
+     *          {@code true} to enabled resizing of the dialog,
+     *          {@code false} otherwise. 
+     */
+    public void setResizable(boolean resizable) {
+        getElement().setProperty("resizable", resizable);
+    }
+
+    /**
+     * Gets whether dialog is enabled to be resized or not.
+     * 
+     * @return
+     *      {@code true} if resizing is enabled,
+     *      {@code falsoe} otherwiser (default).
+     */
+    public boolean isResizable() {
+        return getElement().getProperty("resizable", false);
+    }
+
     private UI getCurrentUI() {
         UI ui = UI.getCurrent();
         if (ui == null) {

vaadin-dialog-flow/src/test/java/com/vaadin/flow/component/dialog/DialogTest.java

@@ -271,6 +271,53 @@ public void addComponentAtIndex_indexIsBiggerThanChildrenCount() {
         addDivAtIndex(1);
     }
 
+    @Test
+    public void isDraggable_falseByDefault() {
+        Dialog dialog = new Dialog();
+
+        Assert.assertFalse("draggable is false by default", dialog.getElement().getProperty("draggable", false));
+    }
+
+    @Test
+    public void setDraggable_dialogCanBeDraggable() {
+        Dialog dialog = new Dialog();
+        dialog.setDraggable(true);
+
+        Assert.assertTrue("draggable can be set to true", dialog.getElement().getProperty("draggable", false));
+    }
+
+    @Test
+    public void isResizable_falseByDefault() {
+        Dialog dialog = new Dialog();
+
+        Assert.assertFalse("resizable is false by default", dialog.getElement().getProperty("resizable", false));
+    }
+
+    @Test
+    public void setResizable_dialogCanBeResizable() {
+        Dialog dialog = new Dialog();
+        dialog.setResizable(true);
+
+        Assert.assertTrue("resizable can be set to true", dialog.getElement().getProperty("resizable", false));
+    }
+
+    @Test
+    public void isModal_trueByDefault() {
+        Dialog dialog = new Dialog();
+
+        // Element's api "modeless" acts inverted to Flow's api "modal": modeless is false and modal is true by default 
+        Assert.assertTrue("modal is true by default", !dialog.getElement().getProperty("modeless", false));
+    }
+
+    @Test
+    public void setModal_dialogCanBeModeless() {
+        Dialog dialog = new Dialog();
+        dialog.setModal(false);
+
+        // Element's api "modeless" acts inverted to Flow's api "modal": modeless is false and modal is true by default 
+        Assert.assertFalse("modal can be set to false", !dialog.getElement().getProperty("modeless", false));
+    }
+
     private void addDivAtIndex(int index) {
         Dialog dialog = new Dialog();