From a7fba1ad33acc5623c2d640a42631b9d096e196c Mon Sep 17 00:00:00 2001
From: Katja Bregenzer <katja.bregenzer@lime.tech>
Date: Mon, 10 Dec 2018 16:15:16 +0100
Subject: [PATCH] feat(limel-dialog): add property closingActions incl. example

close #139
---
 src/components/dialog/dialog.mdx              |  3 ++
 src/components/dialog/dialog.tsx              | 18 +++++++++
 .../dialog/dialog-closing-actions.tsx         | 37 +++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/examples/dialog/dialog-closing-actions.tsx

diff --git a/src/components/dialog/dialog.mdx b/src/components/dialog/dialog.mdx
index 73cf82d51a..d42cfbd786 100644
--- a/src/components/dialog/dialog.mdx
+++ b/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"/> 
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 1182c88602..73e04c2cb9 100644
--- a/src/components/dialog/dialog.tsx
+++ b/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() {
diff --git a/src/examples/dialog/dialog-closing-actions.tsx b/src/examples/dialog/dialog-closing-actions.tsx
new file mode 100644
index 0000000000..8973876b46
--- /dev/null
+++ b/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>,
+        ];
+    }
+}