From 0cc578ba0e9ce7086c38d207d5f71511b7c1f989 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 17 Oct 2017 17:20:06 +0100
Subject: [PATCH] [ADF-1748] remove MDL dependency and fix style issues (#2486)

* remove dialogPolyfill references

* remove MDL dependencies

* style fixes

* exclude the test (needs dialog support)
---
 demo-shell-ng2/app/polyfills.ts               |  2 -
 demo-shell-ng2/app/vendor.ts                  | 11 ----
 demo-shell-ng2/index.html                     |  5 ++
 demo-shell-ng2/package.json                   |  3 -
 .../widgets/attach/attach.widget.spec.ts      | 23 +-------
 .../widgets/attach/attach.widget.ts           |  8 +--
 .../container/container.widget.spec.ts        |  8 ---
 .../src/components/checklist.component.ts     |  8 +--
 ng2-components/ng2-alfresco-core/package.json |  1 -
 .../src/components/viewer.component.html      |  2 +-
 .../src/components/viewer.component.scss      |  4 ++
 ng2-components/package.json                   | 58 ++++++-------------
 12 files changed, 30 insertions(+), 103 deletions(-)

diff --git a/demo-shell-ng2/app/polyfills.ts b/demo-shell-ng2/app/polyfills.ts
index 836039ee8e..b8cda6c116 100644
--- a/demo-shell-ng2/app/polyfills.ts
+++ b/demo-shell-ng2/app/polyfills.ts
@@ -22,8 +22,6 @@ import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
 import 'intl';
 
-require('element.scrollintoviewifneeded-polyfill'); // IE/FF
-
 if (process.env.ENV === 'production') {
     // Production
 
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index f846cac054..4b2a6e95b9 100644
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -50,17 +50,6 @@ import 'ng2-alfresco-userinfo';
 import 'ng2-alfresco-viewer';
 import 'ng2-alfresco-webscript';
 
-// Polyfill(s) for dialogs
-require('script-loader!dialog-polyfill/dialog-polyfill');
-import 'dialog-polyfill/dialog-polyfill.css';
-
-// Google Material Design Lite
-import 'material-design-lite/dist/material.orange-blue.min.css';
-import 'material-design-lite/material.js';
-
-import 'ng2-activiti-form/stencils/runtime.adf';
-import 'ng2-activiti-form/stencils/runtime.ng1';
-
 import 'chart.js';
 import 'ng2-charts';
 require('script-loader!raphael/raphael.min.js');
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 227644620f..e4cbc491e4 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -21,6 +21,11 @@
     <style>
         body, html {
             height: 100%;
+            font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
+        }
+
+        body {
+            margin: 0;
         }
 
         .loader-container {
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index b7777a1eb1..f97054dd68 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -74,10 +74,7 @@
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "custom-event-polyfill": "^0.3.0",
-    "dialog-polyfill": "0.4.7",
-    "element.scrollintoviewifneeded-polyfill": "1.0.1",
     "intl": "1.2.5",
-    "material-design-lite": "1.2.1",
     "minimatch": "3.0.4",
     "moment": "2.15.1",
     "ng2-3d-editor": "0.0.15",
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
index b82227906f..2b7ff7ca4d 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.spec.ts
@@ -36,7 +36,6 @@ describe('AttachWidgetComponent', () => {
     let fixture: ComponentFixture<AttachWidgetComponent>;
     let element: HTMLElement;
     let contentService: ActivitiAlfrescoContentService;
-    let dialogPolyfill: any;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -62,15 +61,6 @@ describe('AttachWidgetComponent', () => {
 
         element = fixture.nativeElement;
         widget = fixture.componentInstance;
-
-        dialogPolyfill = {
-            registerDialog(obj: any) {
-                obj.showModal = () => {
-                };
-            }
-        };
-
-        window['dialogPolyfill'] = dialogPolyfill;
     });
 
     it('should require field value to check file', () => {
@@ -176,7 +166,7 @@ describe('AttachWidgetComponent', () => {
         expect(closed).toBeTruthy();
     });
 
-    it('should show modal dialog', () => {
+    xit('should show modal dialog', () => {
         spyOn(contentService, 'getAlfrescoNodes').and.returnValue(
             Observable.create(observer => {
                 observer.next([]);
@@ -307,17 +297,6 @@ describe('AttachWidgetComponent', () => {
         widget.getExternalContentNodes();
     });
 
-    it('should register dialog via polyfill', () => {
-        widget.dialog = {
-            nativeElement: {}
-        };
-        spyOn(dialogPolyfill, 'registerDialog').and.callThrough();
-        spyOn(widget, 'setupFileBrowser').and.stub();
-        spyOn(widget, 'getExternalContentNodes').and.stub();
-        widget.showDialog();
-        expect(dialogPolyfill.registerDialog).toHaveBeenCalledWith(widget.dialog.nativeElement);
-    });
-
     it('should require configured dialog to show modal', () => {
         widget.dialog = null;
         spyOn(widget, 'setupFileBrowser').and.stub();
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 b1efac4b44..caff449e1e 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
@@ -25,8 +25,6 @@ import { FormFieldModel } from '../core/form-field.model';
 import { FormService } from './../../../services/form.service';
 import { baseHost , WidgetComponent } from './../widget.component';
 
-declare let dialogPolyfill: any;
-
 @Component({
     selector: 'attach-widget',
     templateUrl: './attach.widget.html',
@@ -130,11 +128,7 @@ export class AttachWidgetComponent extends WidgetComponent implements OnInit {
         this.getExternalContentNodes();
 
         if (this.dialog) {
-            if (!this.dialog.nativeElement.showModal) {
-                dialogPolyfill.registerDialog(this.dialog.nativeElement);
-            }
-
-            this.dialog.nativeElement.showModal();
+            // todo: show dialog
             return true;
         }
         return false;
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
index d5d8d07584..b3cd111828 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
@@ -39,7 +39,6 @@ describe('ContainerWidgetComponent', () => {
     let fixture: ComponentFixture<ContainerWidgetComponent>;
     let element: HTMLElement;
     let contentService: ActivitiAlfrescoContentService;
-    let dialogPolyfill;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -62,13 +61,6 @@ describe('ContainerWidgetComponent', () => {
 
         element = fixture.nativeElement;
         widget = fixture.componentInstance;
-
-        dialogPolyfill = {
-            registerDialog(obj: any) {
-                obj.showModal = function () {
-                };
-            }
-        };
     });
 
     it('should wrap field with model instance', () => {
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts
index a3c60faf04..2ddabc029b 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/checklist.component.ts
@@ -101,14 +101,8 @@ export class ChecklistComponent implements OnInit, OnChanges {
         }
     }
 
-    public showDialog() {
+    showDialog() {
         this.dialog.open(this.addNewDialog, { width: '350px' });
-        // if (this.addNewDialog) {
-        //     if (!this.addNewDialog.nativeElement.showModal) {
-        //         dialogPolyfill.registerDialog(this.addNewDialog.nativeElement);
-        //     }
-        //     this.addNewDialog.nativeElement.showModal();
-        // }
     }
 
     public add() {
diff --git a/ng2-components/ng2-alfresco-core/package.json b/ng2-components/ng2-alfresco-core/package.json
index ce32131e35..5ed3a177f8 100644
--- a/ng2-components/ng2-alfresco-core/package.json
+++ b/ng2-components/ng2-alfresco-core/package.json
@@ -59,7 +59,6 @@
     "alfresco-js-api": "1.9.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "material-design-lite": "1.2.1",
     "moment": "2.15.1",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html
index 4bc0737e09..572a6d4d2e 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html
+++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html
@@ -16,7 +16,7 @@
                         (click)="onBackButtonClick()">
                         <mat-icon>arrow_back</mat-icon>
                     </button>
-                    <img [src]="mimeType | adfMimeTypeIcon">
+                    <img class="adf-viewer__mimeicon" [src]="mimeType | adfMimeTypeIcon">
                     <span>{{ displayName }}</span>
                 </adf-toolbar-title>
 
diff --git a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss
index d3a782d03c..120dcf4a2e 100644
--- a/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss
+++ b/ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss
@@ -8,6 +8,10 @@ $adf-viewer-background-color: #f5f5f5;
 
 .adf-viewer {
 
+    &__mimeicon {
+        vertical-align: middle;
+    }
+
     &-container {
         .adf-viewer-layout-content {
             @include full-screen();
diff --git a/ng2-components/package.json b/ng2-components/package.json
index 9dae1b5b98..09b89011c6 100644
--- a/ng2-components/package.json
+++ b/ng2-components/package.json
@@ -34,33 +34,10 @@
   "bugs": {
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
-  "contributors": {
-    "0": {
-      "name": "Eugenio Romano",
-      "email": "eugenio.romano@alfresco.com"
-    },
-    "1": {
-      "name": "Eugenio Romano",
-      "email": "eugenio.romano@alfresco.com"
-    },
-    "2": {
-      "name": "Denys Vuika",
-      "email": "denys.vuika@gmail.com"
-    },
-    "3": {
-      "name": "Eugenio Romano",
-      "email": "eugenio.romano@alfresco.com"
-    }
-  },
-  "keywords": {
-    "0": "alfresco-ng2-components",
-    "1": "angular2",
-    "2": "typescript",
-    "3": "alfresco",
-    "4": "activiti",
-    "5": "ecm",
-    "6": "bpm"
-  },
+  "keywords": [
+    "alfresco",
+    "angular"
+  ],
   "dependencies": {
     "@angular/animations": "4.4.5",
     "@angular/cdk": "2.0.0-beta.12",
@@ -68,6 +45,7 @@
     "@angular/compiler": "4.4.5",
     "@angular/compiler-cli": "4.4.5",
     "@angular/core": "4.4.5",
+    "@angular/flex-layout": "2.0.0-beta.9",
     "@angular/forms": "4.4.5",
     "@angular/http": "4.4.5",
     "@angular/material": "2.0.0-beta.12",
@@ -76,26 +54,24 @@
     "@angular/router": "4.4.5",
     "@ngx-translate/core": "7.0.0",
     "alfresco-js-api": "1.9.0",
+    "chart.js": "2.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
-    "material-design-lite": "1.2.1",
+    "minimatch": "3.0.4",
     "moment": "2.15.1",
+    "ng2-activiti-diagrams": "1.9.0",
+    "ng2-activiti-form": "1.9.0",
+    "ng2-activiti-tasklist": "1.9.0",
+    "ng2-alfresco-core": "1.9.0",
+    "ng2-alfresco-datatable": "1.9.0",
+    "ng2-alfresco-documentlist": "1.9.0",
+    "ng2-charts": "1.6.0",
+    "pdfjs-dist": "1.5.404",
+    "raphael": "2.2.7",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
     "systemjs": "0.19.27",
-    "zone.js": "0.8.12",
-    "ng2-alfresco-core": "1.9.0",
-    "raphael": "2.2.7",
-    "chart.js": "2.5.0",
-    "ng2-activiti-diagrams": "1.9.0",
-    "ng2-charts": "1.6.0",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "ng2-activiti-form": "1.9.0",
-    "ng2-alfresco-datatable": "1.9.0",
-    "ng2-activiti-tasklist": "1.9.0",
-    "ng2-alfresco-documentlist": "1.9.0",
-    "minimatch": "3.0.4",
-    "pdfjs-dist": "1.5.404"
+    "zone.js": "0.8.12"
   },
   "devDependencies": {
     "@types/hammerjs": "2.0.35",