feat(limel-dialog): add property closingActions incl. example

close #139

src/components/dialog/dialog.mdx

@@ -28,3 +28,6 @@ menu: Components
 
 ### Fullscreen
 <limel-example name="limel-example-dialog-fullscreen" path="dialog"/> 
+
+### Custom closing actions
+<limel-example name="limel-example-dialog-closing-actions" path="dialog"/> 

src/components/dialog/dialog.tsx

@@ -35,6 +35,17 @@ export class Dialog {
     @Prop({ mutable: true, reflectToAttr: true })
     public open = false;
 
+    /**
+     * defines which action triggers a close-event;
+     * default: `{escapeKey: true, scrimClick: true,}`;
+     * if another click-event should close the dialog,
+     * add `data-mdc-dialog-action="close"` to that element
+     */
+    @Prop({ reflectToAttr: true })
+    public closingActions: { escapeKey: boolean; scrimClick: boolean } = {
+        escapeKey: true,
+        scrimClick: true,
+    };
     /**
      * Emitted when the dialog is closed from inside the component.
      * (*Not* emitted when the consumer sets the `open`-property to `false`.)
@@ -76,6 +87,13 @@ export class Dialog {
 
             this.open = false;
         });
+
+        this.mdcDialog.scrimClickAction = this.closingActions.scrimClick
+            ? 'close'
+            : '';
+        this.mdcDialog.escapeKeyAction = this.closingActions.escapeKey
+            ? 'close'
+            : '';
     }
 
     public componentDidUnload() {

src/examples/dialog/dialog-closing-actions.tsx

@@ -0,0 +1,37 @@
+import { Component, State } from '@stencil/core';
+
+@Component({
+    tag: 'limel-example-dialog-closing-actions',
+    shadow: true,
+})
+export class DialogClosingActionsExample {
+    @State()
+    private isOpen = false;
+
+    public render() {
+        return [
+            <limel-button
+                primary={true}
+                label="Open"
+                onClick={() => {
+                    this.isOpen = true;
+                }}
+            />,
+            <limel-dialog
+                open={this.isOpen}
+                closingActions={{ escapeKey: false, scrimClick: false }}
+                onClose={() => {
+                    this.isOpen = false;
+                }}
+            >
+                <p>
+                    This dialog doesn't close by clicking the scrim or pressing
+                    the escape key. Only the Ok-button triggers a close event.
+                </p>
+                <limel-button-group slot="button">
+                    <limel-button label="Ok" data-mdc-dialog-action="close" />
+                </limel-button-group>
+            </limel-dialog>,
+        ];
+    }
+}