From dbf734fe3c754086a715f76f8af111df37a4d935 Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Wed, 5 Oct 2016 11:24:58 +0100
Subject: [PATCH 1/2] #631 dialog

---
 demo-shell-ng2/index.html                                     | 4 ++++
 demo-shell-ng2/package.json                                   | 3 ++-
 .../src/components/activiti-start-task.component.ts           | 4 ++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 986e63bc43..f108c3dfa6 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -35,6 +35,10 @@
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
     <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
 
+    <!-- Polyfill(s) for dialogs -->
+    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 8609117530..f8f8b6124b 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -87,7 +87,8 @@
     "ng2-activiti-tasklist": "0.3.3",
     "ng2-activiti-processlist": "0.3.3",
     "ng2-alfresco-webscript": "0.3.2",
-    "ng2-alfresco-tag": "0.3.2"
+    "ng2-alfresco-tag": "0.3.2",
+    "dialog-polyfill": "^0.4.3"
   },
   "devDependencies": {
     "@types/core-js": "^0.9.32",
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
index 3f77d032fe..15da8c356d 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-start-task.component.ts
@@ -21,6 +21,7 @@ import { TaskDetailsModel } from '../models/task-details.model';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
 
 declare let componentHandler: any;
+declare let dialogPolyfill: any;
 
 @Component({
     selector: 'activiti-start-task',
@@ -85,6 +86,9 @@ export class ActivitiStartProcessButton implements OnInit {
     }
 
     public showDialog() {
+        if (!this.dialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.dialog.nativeElement);
+        }
         if (this.dialog) {
             this.dialog.nativeElement.showModal();
         }

From 5d1d7cf30d4f153b4a812115506837a36605cfeb Mon Sep 17 00:00:00 2001
From: Mario Romano <dnamario@hotmail.com>
Date: Wed, 5 Oct 2016 22:39:17 +0100
Subject: [PATCH 2/2] #631 add dialog polyfill for firefox and safari

---
 demo-shell-ng2/app/app.component.css          |  2 +-
 demo-shell-ng2/app/css/app.css                |  4 ++++
 ng2-components/ng2-activiti-form/README.md    | 20 +++++++++++++++++++
 .../widgets/attach/attach.widget.ts           |  6 ++++++
 .../ng2-activiti-tasklist/README.md           | 20 +++++++++++++++++++
 5 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/demo-shell-ng2/app/app.component.css b/demo-shell-ng2/app/app.component.css
index cdfe6eb2e7..e3b36fd2a2 100644
--- a/demo-shell-ng2/app/app.component.css
+++ b/demo-shell-ng2/app/app.component.css
@@ -9,4 +9,4 @@
 }
 .user-profile{
     margin-right: 3px;
-}
\ No newline at end of file
+}
diff --git a/demo-shell-ng2/app/css/app.css b/demo-shell-ng2/app/css/app.css
index 3611cf6ae8..3656efa93b 100644
--- a/demo-shell-ng2/app/css/app.css
+++ b/demo-shell-ng2/app/css/app.css
@@ -35,3 +35,7 @@ body, html {
     text-align: center;
     position: relative;
 }
+
+._dialog_overlay {
+    position: static !important;
+}
diff --git a/ng2-components/ng2-activiti-form/README.md b/ng2-components/ng2-activiti-form/README.md
index 321cb8c87d..abd65ce003 100644
--- a/ng2-components/ng2-activiti-form/README.md
+++ b/ng2-components/ng2-activiti-form/README.md
@@ -45,6 +45,26 @@ Also make sure you include these dependencies in your `index.html` file:
 <script src="node_modules/material-design-lite/material.min.js"></script>
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
+#### Dialogs Polyfill
+
+To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+
+```sh
+npm install --save dialog-polyfill
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+<!-- Polyfill(s) for dialogs -->
+<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+<style>
+._dialog_overlay {
+    position: static !important;
+}
+</style>
+```
 
 ## Basic usage examples
 
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
index fbb2293625..e1c6b010bc 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
@@ -24,6 +24,7 @@ import { FormFieldModel } from '../core/form-field.model';
 
 declare let __moduleName: string;
 declare var componentHandler;
+declare let dialogPolyfill: any;
 
 @Component({
     moduleId: __moduleName,
@@ -122,6 +123,11 @@ export class AttachWidget extends WidgetComponent implements OnInit {
     public showDialog() {
         this.setupFileBrowser();
         this.getExternalContentNodes();
+
+        if (!this.dialog.nativeElement.showModal) {
+            dialogPolyfill.registerDialog(this.dialog.nativeElement);
+        }
+
         if (this.dialog) {
             this.dialog.nativeElement.showModal();
         }
diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md
index c8b225ebc9..719e72b6a5 100644
--- a/ng2-components/ng2-activiti-tasklist/README.md
+++ b/ng2-components/ng2-activiti-tasklist/README.md
@@ -47,6 +47,26 @@ Also make sure you include these dependencies in your `index.html` file:
 <script src="node_modules/material-design-lite/material.min.js"></script>
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
+#### Dialogs Polyfill
+
+To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+
+```sh
+npm install --save dialog-polyfill
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+<!-- Polyfill(s) for dialogs -->
+<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+<style>
+._dialog_overlay {
+    position: static !important;
+}
+</style>
+```
 
 ## Basic usage example Activiti Task List
 The component shows the list of all the tasks filter by the