[ADF-589] Login component different bug fixes (#1953)

* Basic style changes

* Further design changes

* Responsive design fixes

* Different sign in button style for the different login steps

.github/ISSUE_TEMPLATE.md

@@ -6,12 +6,12 @@ Please ask before on our gitter channel https://gitter.im/Alfresco/alfresco-ng2-
 -->
 
 **Type of issue:**  (check with "[x]")
-```
-- [ ] New feature request
-- [ ] Bug  
-- [ ] Support request
-- [ ] Documentation
-```
+
+> - [ ] New feature request
+> - [ ] Bug  
+> - [ ] Support request
+> - [ ] Documentation
+
 **Current behaviour:**
 <!-- Describe the current behaviour. -->
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,24 +1,24 @@
 **Please check if the PR fulfills these requirements**
-```
-[ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
-[ ] Tests for the changes have been added (for bug fixes / features)
-[ ] Docs have been added / updated (for bug fixes / features)
-```
+
+> - [ ] The commit message follows our [guidelines](https://github.com/Alfresco/alfresco-ng2-components/wiki/Commit-format)
+> - [ ] Tests for the changes have been added (for bug fixes / features)
+> - [ ] Docs have been added / updated (for bug fixes / features)
+
 <!--
  Before submitting your PR, please check that your code follows our contribution guidelines:
  https://github.com/Alfresco/alfresco-ng2-components/wiki/Code-contribution-acceptance-criteria
  -->
 
 **What kind of change does this PR introduce?** (check one with "x")
-```
-[ ] Bugfix
-[ ] Feature
-[ ] Code style update (formatting, local variables)
-[ ] Refactoring (no functional changes, no api changes)
-[ ] Build related changes
-[ ] Documentation
-[ ] Other... Please describe:
-```
+
+> - [ ] Bugfix
+> - [ ] Feature
+> - [ ] Code style update (formatting, local variables)
+> - [ ] Refactoring (no functional changes, no api changes)
+> - [ ] Build related changes
+> - [ ] Documentation
+> - [ ] Other... Please describe:
+
 
 **What is the current behaviour?** (You can also link to an open issue here)
 
@@ -29,10 +29,10 @@
 
 
 **Does this PR introduce a breaking change?** (check one with "x")
-```
-[ ] Yes
-[ ] No
-```
+
+> - [ ] Yes
+> - [ ] No
+
 
 If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
 

.travis.yml

@@ -38,7 +38,7 @@ script:
        fi
       fi
 
-# Send coverage data to Coveralls
+# Send coverage data to codecov
 after_success:
   bash <(curl -s https://codecov.io/bash) -X gcov
 

.vscode/settings.json

@@ -11,5 +11,5 @@
         "**/coverage": true
     },
     "editor.renderIndentGuides": true,
-    "tslint.configFile": "ng2-components/config/assets/tslint.json"
+    "tslint.configFile": "ng2-components/tslint.json"
 }

demo-shell-ng2/app/app.module.ts

@@ -33,12 +33,15 @@ import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
 import { AnalyticsModule } from 'ng2-activiti-analytics';
+import { DiagramsModule } from 'ng2-activiti-diagrams';
+
+import { MaterialModule } from './material.module';
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 import { Editor3DModule } from 'ng2-3d-editor';
-import { MaterialModule } from '@angular/material';
 import { ChartsModule } from 'ng2-charts';
+import { CreateFolderDialog } from './dialogs/create-folder.dialog';
 
 import {
     HomeComponent,
@@ -47,6 +50,7 @@ import {
     SearchBarComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
     ActivitiAppsView,
     FormViewer,
     WebscriptComponent,
@@ -62,8 +66,8 @@ import {
     imports: [
         BrowserModule,
         routing,
-        MaterialModule.forRoot(),
         CoreModule.forRoot(),
+        MaterialModule,
         LoginModule.forRoot(),
         SearchModule.forRoot(),
         DataTableModule.forRoot(),
@@ -78,6 +82,7 @@ import {
         ActivitiProcessListModule.forRoot(),
         UserInfoComponentModule.forRoot(),
         AnalyticsModule.forRoot(),
+        DiagramsModule.forRoot(),
         CustomEditorsModule,
         Editor3DModule.forRoot(),
         ChartsModule
@@ -90,6 +95,7 @@ import {
         SearchBarComponent,
         LoginDemoComponent,
         ActivitiDemoComponent,
+        ActivitiShowDiagramComponent,
         ActivitiAppsView,
         FormViewer,
         WebscriptComponent,
@@ -98,9 +104,13 @@ import {
         AboutComponent,
         FilesComponent,
         FormNodeViewer,
-        SettingComponent
+        SettingComponent,
+        CreateFolderDialog
     ],
     providers: [],
-    bootstrap: [ AppComponent ]
+    bootstrap: [ AppComponent ],
+    entryComponents: [
+        CreateFolderDialog
+    ]
 })
 export class AppModule { }

demo-shell-ng2/app/app.routes.ts

@@ -26,6 +26,7 @@ import {
     SearchComponent,
     LoginDemoComponent,
     ActivitiDemoComponent,
+    ActivitiShowDiagramComponent,
     ActivitiAppsView,
     WebscriptComponent,
     TagComponent,
@@ -90,6 +91,11 @@ export const appRoutes: Routes = [
         component: ActivitiDemoComponent,
         canActivate: [AuthGuardBpm]
     },
+    {
+        path: 'activiti/diagram/:processDefinitionId',
+        component: ActivitiShowDiagramComponent,
+        canActivate: [AuthGuardBpm]
+    },
     // TODO: check if neeeded
     {
         path: 'activiti/appId/:appId',

demo-shell-ng2/app/components/about/about.component.html

@@ -1,4 +1,10 @@
 <div class="about-container">
+    <div *ngIf="githubUrlCommitAlpha">
+        <h3>Current Commit position</h3>
+        <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
+    </div>
+
+
     <h3>Packages</h3>
     <alfresco-datatable [data]="data"></alfresco-datatable>
 </div>

demo-shell-ng2/app/components/about/about.component.ts

@@ -29,6 +29,8 @@ export class AboutComponent implements OnInit {
 
     data: ObjectDataTableAdapter;
 
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
     constructor(private http: Http,
                 private logService: LogService) {
     }
@@ -42,18 +44,38 @@ export class AboutComponent implements OnInit {
                 return regexp.test(val);
             });
 
-            let alfrescoPackagesTableRappresentation = [];
+            let alfrescoPackagesTableRepresentation = [];
             alfrescoPackages.forEach((val) => {
                 this.logService.log(response.json().dependencies[val]);
-                alfrescoPackagesTableRappresentation.push({name: val, version: response.json().dependencies[val].version});
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
             });
 
-            this.logService.log(alfrescoPackagesTableRappresentation);
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
 
-            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRappresentation, [
+            this.logService.log(alfrescoPackagesTableRepresentation);
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
                 {type: 'text', key: 'name', title: 'Name', sortable: true},
                 {type: 'text', key: 'version', title: 'Version', sortable: true}
             ]);
         });
     }
+
+    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+        let corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+            return packageUp.name === 'ng2-alfresco-core';
+        });
+
+        if (corePackage) {
+            let commitIsh = corePackage.version.split('-');
+            if (commitIsh.length > 1) {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + commitIsh[1];
+            } else {
+                this.githubUrlCommitAlpha = this.githubUrlCommitAlpha + corePackage.version;
+            }
+        }
+    }
 }

demo-shell-ng2/app/components/activiti/activiti-demo.component.css

@@ -24,3 +24,17 @@
     text-align: left;
     margin-bottom: 5px;
 }
+
+.adf-no-form-container {    
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    font-family: Muli;
+    padding: 16px;
+}
+
+.action-header {
+    border: 1px solid rgb(224, 224, 224);
+    background: #fff;
+    text-align: left;
+}

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -28,6 +28,7 @@
                         <adf-accordion>
                             <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assignment'">
                                 <activiti-filters
+                                    [filterParam]="{name:'MY tasks'}"
                                     [appId]="appId"
                                     [hasIcon]="false"
                                     (filterClick)="onTaskFilterClick($event)"
@@ -72,10 +73,25 @@
                         </activiti-task-details>
                         <hr>
                         <h5>Attachments</h5>
-                        <adf-task-attachment-list *ngIf="currentTaskId"
-                          [taskId]="currentTaskId"
-                          (attachmentClick)="onAttachmentClick($event)">
-                        </adf-task-attachment-list>
+                        <div class="adf-no-form-container">
+                            <div class="action-header">
+                                <button class="mdl-button mdl-js-button" (click)="toggleCreateTakAttach()">
+                                    Attach Document
+                                    <i class="material-icons">add</i>
+                                </button>
+                            </div>
+                            <adf-task-attachment-list #taskAttach
+                                                      *ngIf="currentTaskId"
+                                                      [taskId]="currentTaskId"
+                                                      (attachmentClick)="onAttachmentClick($event)">
+                            </adf-task-attachment-list>
+                            <div *ngIf="isCreateTaskAttachVisible()">
+                                <adf-create-task-attachment *ngIf="currentTaskId"
+                                                            [taskId]="currentTaskId"
+                                                            (success)="onCreateTaskSuccess  ()">
+                                </adf-create-task-attachment>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -101,6 +117,7 @@
                             <adf-accordion>
                                 <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true" [headingIcon]="'assessment'">
                                     <activiti-process-instance-filters
+                                        [filterParam]="{index: 0}"
                                         [appId]="appId"
                                         (filterClick)="onProcessFilterClick($event)"
                                         (onSuccess)="onSuccessProcessFilterList($event)">
@@ -133,8 +150,15 @@
                             <activiti-process-instance-details
                                 [processInstanceId]="currentProcessInstanceId"
                                 (processCancelled)="processCancelled()"
+                                (showProcessDiagram)="onShowProcessDiagram($event)"
                                 (taskClick)="onProcessDetailsTaskClick($event)">
                             </activiti-process-instance-details>
+                            <hr>
+                            <h5>Attachments</h5>
+                            <adf-process-attachment-list *ngIf="currentProcessInstanceId"
+                                                      [processInstanceId]="currentProcessInstanceId"
+                                                      (attachmentClick)="onAttachmentClick($event)">
+                            </adf-process-attachment-list>
                         </div>
                         <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
                             <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
@@ -167,9 +191,12 @@
                             [reportId]="report.id"
                             [hideParameters]="false"
                             (editReport)="onEditReport($event)"
-                            (reportSaved)="onReportSaved()"
+                            (reportSaved)="onReportSaved($event)"
                             (reportDeleted)="onReportDeleted()">
                         </activiti-analytics>
+                        <div *ngIf="!report">
+                            <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                        </div>
                     </div>
                 </div>
             </div>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -21,7 +21,8 @@ import {
     ActivitiFilters,
     ActivitiTaskList,
     FilterRepresentationModel,
-    TaskDetailsEvent
+    TaskDetailsEvent,
+    TaskAttachmentListComponent
 } from 'ng2-activiti-tasklist';
 import {
     ActivitiProcessFilters,
@@ -32,7 +33,7 @@ import {
     ProcessInstance
 } from 'ng2-activiti-processlist';
 import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 import {
     ObjectDataTableAdapter,
@@ -60,6 +61,9 @@ export class ActivitiDemoComponent implements AfterViewInit {
     @ViewChild(ActivitiTaskList)
     taskList: ActivitiTaskList;
 
+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
     @ViewChild(ActivitiProcessFilters)
     activitiprocessfilter: ActivitiProcessFilters;
 
@@ -100,12 +104,14 @@ export class ActivitiDemoComponent implements AfterViewInit {
     sub: Subscription;
     blobFile: any;
     flag: boolean = true;
+    createTaskAttach: boolean = false;
 
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
     constructor(private elementRef: ElementRef,
                 private route: ActivatedRoute,
+                private router: Router,
                 private apiService: AlfrescoApiService,
                 private formRenderingService: FormRenderingService,
                 private formService: FormService) {
@@ -115,8 +121,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.dataProcesses = new ObjectDataTableAdapter(
             [],
             [
-                {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
-                {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true }
             ]
         );
         this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
@@ -156,15 +162,15 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.sub.unsubscribe();
     }
 
-    onTaskFilterClick(filter: FilterRepresentationModel) {
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
         this.applyTaskFilter(filter);
     }
 
-    onReportClick(event: any) {
+    onReportClick(event: any): void {
         this.report = event;
     }
 
-    onSuccessTaskFilterList(event: any) {
+    onSuccessTaskFilterList(event: any): void {
         this.applyTaskFilter(this.activitifilter.getCurrentFilter());
     }
 
@@ -175,7 +181,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
         }
     }
 
-    onStartTaskSuccess(event: any) {
+    onStartTaskSuccess(event: any): void {
         this.activitifilter.selectFilterWithTask(event.id);
         this.currentTaskId = event.id;
     }
@@ -184,88 +190,88 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: FilterProcessRepresentationModel) {
+    onProcessFilterClick(event: FilterProcessRepresentationModel): void {
         this.currentProcessInstanceId = null;
         this.processFilter = event;
     }
 
-    onSuccessProcessFilterList() {
+    onSuccessProcessFilterList(): void {
         this.processFilter = this.activitiprocessfilter.getCurrentFilter();
     }
 
-    onSuccessProcessList(event: any) {
+    onSuccessProcessList(event: any): void {
         this.currentProcessInstanceId = this.processList.getCurrentId();
     }
 
-    onTaskRowClick(taskId) {
+    onTaskRowClick(taskId): void {
         this.currentTaskId = taskId;
     }
 
-    onProcessRowClick(processInstanceId) {
+    onProcessRowClick(processInstanceId): void {
         this.currentProcessInstanceId = processInstanceId;
     }
 
-    onEditReport(name: string) {
+    onEditReport(name: string): void {
         this.analyticsreportlist.reload();
     }
 
-    onReportSaved() {
-        this.analyticsreportlist.reload();
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
     }
 
-    onReportDeleted() {
-        this.selectFirstReport = true;
+    onReportDeleted(): void {
         this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
     }
 
-    navigateStartProcess() {
+    navigateStartProcess(): void {
         this.resetProcessFilters();
         this.reloadProcessFilters();
         this.currentProcessInstanceId = currentProcessIdNew;
     }
 
-    onStartProcessInstance(instance: ProcessInstance) {
+    onStartProcessInstance(instance: ProcessInstance): void {
         this.currentProcessInstanceId = instance.id;
         this.activitiStartProcess.reset();
         this.resetProcessFilters();
     }
 
-    isStartProcessMode() {
+    isStartProcessMode(): boolean {
         return this.currentProcessInstanceId === currentProcessIdNew;
     }
 
-    processCancelled(data: any) {
+    processCancelled(data: any): void {
         this.currentProcessInstanceId = null;
         this.processList.reload();
     }
 
-    onSuccessNewProcess(data: any) {
+    onSuccessNewProcess(data: any): void {
         this.processList.reload();
     }
 
-    onFormCompleted(form) {
+    onFormCompleted(form): void {
         this.taskList.reload();
         this.currentTaskId = null;
     }
 
-    onFormContentClick(content: any) {
+    onFormContentClick(content: any): void {
         this.fileShowed = true;
         this.content = content.contentBlob;
         this.contentName = content.name;
     }
 
-    onAttachmentClick(content: any) {
+    onAttachmentClick(content: any): void {
         this.fileShowed = true;
         this.content = content.contentBlob;
         this.contentName = content.name;
     }
 
-    onTaskCreated(data: any) {
+    onTaskCreated(data: any): void {
         this.currentTaskId = data.parentTaskId;
         this.taskList.reload();
     }
 
-    onTaskDeleted(data: any) {
+    onTaskDeleted(data: any): void {
         this.taskList.reload();
     }
 
@@ -289,7 +295,11 @@ export class ActivitiDemoComponent implements AfterViewInit {
         });
     }
 
-    onProcessDetailsTaskClick(event: TaskDetailsEvent) {
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
         event.preventDefault();
         this.activeTab = 'tasks';
 
@@ -305,20 +315,33 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.currentTaskId = taskId;
     }
 
-    private resetProcessFilters() {
+    private resetProcessFilters(): void {
         this.processFilter = null;
     }
 
-    private reloadProcessFilters() {
+    private reloadProcessFilters(): void {
         this.activitiprocessfilter.selectFilter(null);
     }
 
-    onRowClick(event) {
+    onRowClick(event): void {
         console.log(event);
     }
 
-    onRowDblClick(event) {
+    onRowDblClick(event): void {
         console.log(event);
     }
 
+    onCreateTaskSuccess(): void {
+        this.taskAttachList.reload();
+        this.toggleCreateTakAttach();
+    }
+
+    toggleCreateTakAttach(): void {
+        this.createTaskAttach = !this.createTaskAttach;
+    }
+
+    isCreateTaskAttachVisible(): boolean {
+        return this.createTaskAttach;
+    }
+
 }

demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html

@@ -0,0 +1,6 @@
+<div>
+    <button (click)="onClickBack()" class="mdl-button mdl-button--icon">
+        <i class="material-icons">keyboard_backspace</i>
+    </button>
+    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+</div>

demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { Subscription } from 'rxjs/Rx';
+import { ActivatedRoute } from '@angular/router';
+import {Location} from '@angular/common';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    sub: Subscription;
+    processDefinitionId: string;
+
+    constructor(private route: ActivatedRoute,
+                private location: Location) {
+        this.sub = this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+        });
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+    onClickBack() {
+        this.location.back();
+    }
+
+}

demo-shell-ng2/app/components/datatable/datatable-demo.component.css

@@ -0,0 +1,10 @@
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: green;
+    outline-style: solid;
+}
+
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+    color: green;
+}

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -1,8 +1,10 @@
 <div class="p-10">
     <alfresco-datatable
         [data]="data"
+        [selectionMode]="selectionMode"
         [multiselect]="multiselect"
         [actions]="true"
+        rowStyleClass="custom-row-style"
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
         (executeRowAction)="onExecuteRowAction($event)"
         (row-click)="onRowClick($event)"
@@ -19,9 +21,17 @@
         -->
     </alfresco-datatable>
 </div>
-<div class="p-10">
+<div class="p-10" data-automation-id="multiselect">
     <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
+<div class="p-10">
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
+</div>
 <div class="p-10">
     <button md-raised-button (click)="reset()">Reset to default</button>
     <button md-raised-button (click)="addRow()">Add row</button>

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -15,18 +15,28 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
 
 @Component({
     selector: 'datatable-demo',
-    templateUrl: './datatable-demo.component.html'
+    templateUrl: './datatable-demo.component.html',
+    styleUrls: ['./datatable-demo.component.css']
 })
 export class DataTableDemoComponent {
 
     multiselect: boolean = false;
     data: ObjectDataTableAdapter;
 
+    @Input()
+    selectionMode = 'single';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
     private _imageUrl: string = 'http://placehold.it/140x100';
     private _createdBy: any = {
         name: 'Denys Vuika',

demo-shell-ng2/app/components/files/files.component.html

@@ -12,17 +12,44 @@
             </button>
             <span class="error-message--text">{{errorMessage}}</span>
         </div>
+        <ng-container *ngIf="useCustomToolbar">
+            <adf-toolbar title="Toolbar">
+                <button md-icon-button (click)="onCreateFolderClicked($event)">
+                    <md-icon>create_new_folder</md-icon>
+                </button>
+                <button md-icon-button>
+                    <md-icon>delete</md-icon>
+                </button>
+                <button md-icon-button [mdMenuTriggerFor]="menu">
+                    <md-icon>more_vert</md-icon>
+                </button>
+                <md-menu #menu="mdMenu">
+                    <button md-menu-item>
+                        <md-icon>dialpad</md-icon>
+                        <span>Redial</span>
+                    </button>
+                    <button md-menu-item disabled>
+                        <md-icon>voicemail</md-icon>
+                        <span>Check voicemail</span>
+                    </button>
+                    <button md-menu-item>
+                        <md-icon>notifications_off</md-icon>
+                        <span>Disable alerts</span>
+                    </button>
+                </md-menu>
+            </adf-toolbar>
+        </ng-container>
         <alfresco-document-list
                 #documentList
+                [creationMenuActions]="!useCustomToolbar"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
                 [contentActions]="true"
                 [allowDropFiles]="true"
-                [sorting]="['name', 'desc']"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (preview)="showFile($event)"
-                (permissionError)="onPermissionsFailed($event)">
+                (permissionError)="handlePermissionError($event)">
             <data-columns>
                 <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
                 <data-column
@@ -32,20 +59,20 @@
 
                     <!-- Example #1: using custom template with implicit access to data context -->
                     <!--
-                    <template let-entry="$implicit">
+                    <ng-template let-entry="$implicit">
                         <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-                    </template>
+                    </ng-template>
                     -->
 
                     <!-- Example #2: using custom template with value access -->
                     <!--
-                    <template let-value="value">
+                    <ng-template let-value="value">
                         <span>Hi! {{value}}</span>
-                    </template>
+                    </ng-template>
                     -->
 
                 </data-column>
-                <!-- Notes: has performance problems due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                 <!--
                 <data-column
                     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
@@ -72,22 +99,12 @@
 
             <content-actions>
                 <!-- folder actions -->
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
-                        handler="system1">
-                </content-action>
-                <content-action
-                        target="folder"
-                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
-                        (execute)="myFolderAction1($event)">
-                </content-action>
                 <content-action
                         target="folder"
                         permission="delete"
                         [disableWithNoPermission]="true"
                         title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
-                        (permissionEvent)="onPermissionsFailed($event)"
+                        (permissionEvent)="handlePermissionError($event)"
                         handler="delete">
                 </content-action>
                 <!-- document actions -->
@@ -96,29 +113,14 @@
                         title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
                         handler="download">
                 </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
-                        handler="system2">
-                </content-action>
-                <content-action
-                        target="document"
-                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
-                        (execute)="myCustomAction1($event)">
-                </content-action>
                 <content-action
                         target="document"
                         permission="delete"
                         [disableWithNoPermission]="true"
-                        (permissionEvent)="onPermissionsFailed($event)"
+                        (permissionEvent)="handlePermissionError($event)"
                         title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                         handler="delete">
                 </content-action>
-                <content-action
-                        target="folder"
-                        title="Activiti: View Form"
-                        (execute)="viewActivitiForm($event)">
-                </content-action>
             </content-actions>
         </alfresco-document-list>
     </alfresco-upload-drag-area>
@@ -127,6 +129,10 @@
 <context-menu-holder></context-menu-holder>
 
 <div class="container">
+    <section>
+        <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
+    </section>
+
     <section>
         <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
     </section>
@@ -150,7 +156,7 @@
     <h5>Upload</h5>
     <section *ngIf="acceptedFilesTypeShow">
         <md-input-container>
-            <input md-input placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
+            <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
         </md-input-container>
     </section>
     <div *ngIf="!acceptedFilesTypeShow">
@@ -163,7 +169,7 @@
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
             [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <div *ngIf="acceptedFilesTypeShow">
@@ -177,7 +183,7 @@
             [uploadFolders]="folderUpload"
             [versioning]="versioning"
             [disableWithNoPermission]="disableWithNoPermission"
-            (permissionEvent)="onUploadPermissionFailed($event)">
+            (permissionEvent)="handlePermissionError($event)">
         </alfresco-upload-button>
     </div>
     <section>
@@ -193,9 +199,9 @@
                      [overlayMode]="true">
 
         <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-            <template let-urlFileContent="urlFileContent" let-extension="extension" >
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
                 <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-            </template>
+            </ng-template>
         </extension-viewer>
 
     </alfresco-viewer>

demo-shell-ng2/app/components/files/files.component.ts

@@ -15,19 +15,21 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, AfterViewInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { ActivatedRoute, Params, Router } from '@angular/router';
-import { AlfrescoAuthenticationService, LogService, NotificationService } from 'ng2-alfresco-core';
-import { DocumentActionsService, DocumentListComponent, ContentActionHandler, DocumentActionModel, FolderActionModel } from 'ng2-alfresco-documentlist';
-import { FormService } from 'ng2-activiti-form';
-import { UploadButtonComponent, UploadDragAreaComponent } from 'ng2-alfresco-upload';
+import { Component, Input, OnInit, Optional, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { AlfrescoContentService, FolderCreatedEvent, NotificationService } from 'ng2-alfresco-core';
+import { DocumentListComponent } from 'ng2-alfresco-documentlist';
+import { UploadService, FileUploadCompleteEvent } from 'ng2-alfresco-upload';
+
+import { CreateFolderDialog } from '../../dialogs/create-folder.dialog';
 
 @Component({
     selector: 'files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.css']
 })
-export class FilesComponent implements OnInit, AfterViewInit {
+export class FilesComponent implements OnInit {
     // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
     currentFolderId: string = '-my-';
 
@@ -35,6 +37,8 @@ export class FilesComponent implements OnInit, AfterViewInit {
     fileNodeId: any;
     fileShowed: boolean = false;
 
+    useCustomToolbar = true;
+
     @Input()
     multipleFileUpload: boolean = false;
 
@@ -59,33 +63,12 @@ export class FilesComponent implements OnInit, AfterViewInit {
     @ViewChild(DocumentListComponent)
     documentList: DocumentListComponent;
 
-    @ViewChild(UploadButtonComponent)
-    uploadButton: UploadButtonComponent;
-
-    @ViewChild(UploadDragAreaComponent)
-    uploadDragArea: UploadDragAreaComponent;
-
-    constructor(private documentActions: DocumentActionsService,
-                private authService: AlfrescoAuthenticationService,
-                private formService: FormService,
-                private logService: LogService,
-                private changeDetector: ChangeDetectorRef,
-                private router: Router,
+    constructor(private changeDetector: ChangeDetectorRef,
                 private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: AlfrescoContentService,
+                private dialog: MdDialog,
                 @Optional() private route: ActivatedRoute) {
-        documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
-    }
-
-    myDocumentActionHandler(obj: any) {
-        window.alert('my custom action handler');
-    }
-
-    myCustomAction1(event) {
-        alert('Custom document action for ' + event.value.entry.name);
-    }
-
-    myFolderAction1(event) {
-        alert('Custom folder action for ' + event.value.entry.name);
     }
 
     showFile(event) {
@@ -112,32 +95,9 @@ export class FilesComponent implements OnInit, AfterViewInit {
                 }
             });
         }
-        if (this.authService.isBpmLoggedIn()) {
-            this.formService.getProcessDefinitions().subscribe(
-                defs => this.setupBpmActions(defs || []),
-                err => this.logService.error(err)
-            );
-        } else {
-            this.logService.warn('You are not logged in to BPM');
-        }
-    }
 
-    ngAfterViewInit() {
-        this.uploadButton.onSuccess
-            .debounceTime(100)
-            .subscribe((event) => {
-                this.reload(event);
-            });
-
-        this.uploadDragArea.onSuccess
-            .debounceTime(100)
-            .subscribe((event) => {
-                this.reload(event);
-            });
-    }
-
-    viewActivitiForm(event?: any) {
-        this.router.navigate(['/activiti/tasksnode', event.value.entry.id]);
+        this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadComplete(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
     }
 
     onNavigationError(err: any) {
@@ -150,39 +110,36 @@ export class FilesComponent implements OnInit, AfterViewInit {
         this.errorMessage = null;
     }
 
-    private setupBpmActions(actions: any[]) {
-        actions.map(def => {
-            let documentAction = new DocumentActionModel();
-            documentAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            documentAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(documentAction);
-
-            let folderAction = new FolderActionModel();
-            folderAction.title = 'Activiti: ' + (def.name || 'Unknown process');
-            folderAction.handler = this.getBpmActionHandler(def);
-            this.documentList.actions.push(folderAction);
-        });
-    }
-
-    private getBpmActionHandler(processDefinition: any): ContentActionHandler {
-        return function (obj: any, target?: any) {
-            window.alert(`Starting BPM process: ${processDefinition.id}`);
-        }.bind(this);
-    }
-
-    onPermissionsFailed(event: any) {
-        this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
-    }
-
-    onUploadPermissionFailed(event: any) {
-        this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
-    }
-
-    reload(event: any) {
-        if (event && event.value && event.value.entry && event.value.entry.parentId) {
-            if (this.documentList.currentFolderId === event.value.entry.parentId) {
-                this.documentList.reload();
-            }
+    onFileUploadComplete(event: FileUploadCompleteEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
         }
     }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        console.log('FOLDER CREATED');
+        console.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.notificationService.openSnackMessage(
+            `You don't have the ${event.permission} permission to ${event.action} the ${event.type} `,
+            4000
+        );
+    }
+
+    onCreateFolderClicked(event: Event) {
+        let dialogRef = this.dialog.open(CreateFolderDialog);
+        dialogRef.afterClosed().subscribe(folderName => {
+            if (folderName) {
+                this.contentService.createFolder('', folderName, this.documentList.currentFolderId).subscribe(
+                    node => console.log(node),
+                    err => console.log(err)
+                );
+            }
+        });
+    }
 }

demo-shell-ng2/app/components/index.ts

@@ -21,6 +21,7 @@ export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';
 export { LoginDemoComponent } from './login/login-demo.component';
 export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
+export { ActivitiShowDiagramComponent } from './activiti/activiti-show-diagram.component';
 export { FormViewer } from './activiti/form-viewer.component';
 export { WebscriptComponent } from './webscript/webscript.component';
 export { TagComponent } from './tag/tag.component';

demo-shell-ng2/app/components/login/login-demo.component.css

@@ -15,11 +15,6 @@
     z-index: 1;
 }
 
-.banned {
-    width: 130px;
-    margin: 10px;
-}
-
 .toggle {
     width: 120px;
     margin: 20px;

demo-shell-ng2/app/components/login/login-demo.component.html

@@ -21,10 +21,6 @@
             <span class="mdl-switch__label">CSRF</span>
         </label>
     </p>
-    <p class="banned">
-        <label for="blacklistusername">Banned username</label><br>
-        <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername"/>
-    </p>
 </div>
 
 <!--SETTING BUTTON-->
@@ -41,7 +37,6 @@
                 [providers]="providers"
                 [fieldsValidation]="customValidation"
                 [disableCsrf]="disableCsrf"
-                (executeSubmit)="validateForm($event)"
                 (onSuccess)="onLogin($event)"
                 (onError)="onError($event)">
     <div class="mobile-settings">
@@ -65,9 +60,5 @@
                 <span class="mdl-switch__label">CSRF</span>
             </label>
         </p>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="blackListUsername" id="blacklistusername"/>
-            <label class="mdl-textfield__label" for="blacklistusername">Banned username</label>
-        </div>
     </div>
 </alfresco-login>

demo-shell-ng2/app/components/login/login-demo.component.ts

@@ -31,7 +31,6 @@ export class LoginDemoComponent implements OnInit {
     alfrescologin: any;
 
     providers: string = 'ECM';
-    blackListUsername: string;
     customValidation: any;
 
     disableCsrf: boolean = false;
@@ -114,13 +113,4 @@ export class LoginDemoComponent implements OnInit {
         this.providers = '';
         return this.providers;
     };
-
-    validateForm(event: any) {
-        let values = event.values;
-        if (values.controls['username'].value === this.blackListUsername) {
-            this.alfrescologin.addCustomFormError('username', 'This particular username has been blocked');
-            event.preventDefault();
-        }
-    }
-
 }

demo-shell-ng2/app/dialogs/create-folder.dialog.ts

@@ -0,0 +1,44 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'adf-create-folder-dialog',
+    template: `
+        <h1 md-dialog-title>Create a new folder</h1>
+        <div md-dialog-content>
+            <md-input-container class="create-folder--name">
+                <input mdInput placeholder="Folder name" [(ngModel)]="value">
+            </md-input-container>
+        </div>
+        <div md-dialog-actions>
+            <button md-button md-dialog-close>Cancel</button>
+            <button md-button [md-dialog-close]="value">Create</button>
+        </div>
+    `,
+    styles: [
+        `
+        .create-folder--name {
+            width: 100%;
+        }
+        `
+    ]
+})
+export class CreateFolderDialog {
+    value: string = '';
+}

demo-shell-ng2/app/material.module.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { MdSlideToggleModule, MdInputModule, MdSelectModule, MdDialogModule } from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MdSlideToggleModule,
+    MdInputModule,
+    MdSelectModule,
+    MdDialogModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {}

demo-shell-ng2/app/vendor.ts

@@ -39,7 +39,7 @@ import 'dialog-polyfill/dialog-polyfill.css';
 import 'flag-icon-css/css/flag-icon.min.css';
 
 // Load the Angular Material 2 stylesheet
-import '../public/css/angular-material.css';
+import '@angular/material/prebuilt-themes/indigo-pink.css';
 
 // Google Material Design Lite
 import 'material-design-lite/material.js';

demo-shell-ng2/config/webpack.common.js

@@ -61,15 +61,6 @@ module.exports = {
                 use: 'source-map-loader',
                 exclude: [ /public/, /resources/, /dist/]
             },
-            {
-                test: /\.ts$/,
-                include: [helpers.root('app'), helpers.root('../ng2-components')],
-                loader: [
-                    'ts-loader',
-                    'angular2-template-loader'
-                ],
-                exclude: [ /node_modules/, /public/, /resources/, /dist/]
-            },
             {
                 test: /\.html$/,
                 loader: 'html-loader',
@@ -88,6 +79,10 @@ module.exports = {
                 include: [helpers.root('app'), helpers.root('../ng2-components')],
                 loader: 'raw-loader'
             },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                 loader: 'file-loader?name=assets/[name].[hash].[ext]'
@@ -119,25 +114,11 @@ module.exports = {
         }),
 
         new CopyWebpackPlugin([
-            ... alfrescoLibs.map(lib => {
-                return {
-                    context: `../ng2-components/${lib}/bundles/assets/` ,
-                    from: '**/*',
-                    to: `assets/`
-                }
-            }),
             {
                 context: 'resources/i18n',
                 from: '**/*.json',
                 to: 'resources/i18n'
             },
-            ... alfrescoLibs.map(lib => {
-                return {
-                    context: 'node_modules',
-                    from: `${lib}/src/i18n/*.json`,
-                    to: 'node_modules'
-                }
-            }),
             {
                 from: 'favicon-96x96.png'
             },

demo-shell-ng2/config/webpack.dev.js

@@ -4,6 +4,25 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const commonConfig = require('./webpack.common.js');
 const helpers = require('./helpers');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
 
 module.exports = webpackMerge(commonConfig, {
 
@@ -15,6 +34,20 @@ module.exports = webpackMerge(commonConfig, {
         chunkFilename: '[id].chunk.js'
     },
 
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
     resolve: {
         alias: {
             "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/index.ts'),
@@ -47,6 +80,15 @@ module.exports = webpackMerge(commonConfig, {
             htmlLoader: {
                 minimize: false // workaround for ng2
             }
-        })
+        }),
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/src/i18n/`,
+                    from: '**/*',
+                    to: `assets/${lib}/i18n/`
+                }
+            }),
+        ])
     ]
 });

demo-shell-ng2/config/webpack.prod.js

@@ -41,6 +41,21 @@ module.exports = webpackMerge(commonConfig, {
         modules: [helpers.root('node_modules')]
     },
 
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                include: [helpers.root('app'), helpers.root('../ng2-components')],
+                use: ['ts-loader?' + JSON.stringify({
+                    "compilerOptions": {
+                        "paths": {}
+                    }
+                }), 'angular2-template-loader'],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            }
+        ]
+    },
+
     plugins: [
         new CopyWebpackPlugin([
             ... alfrescoLibs.map(lib => {

demo-shell-ng2/package.json

@@ -64,7 +64,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
     "@angular/compiler-cli": "~4.0.0",
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "core-js": "2.4.1",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.1.0",
@@ -122,9 +122,11 @@
     "karma-remap-istanbul": "^0.6.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.2",
+    "node-sass": "^3.13.1",
     "null-loader": "^0.1.1",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
+    "sass-loader": "6.0.2",
     "script-loader": "0.7.0",
     "source-map-loader": "^0.1.6",
     "sourcemap-istanbul-instrumenter-loader": "^0.2.0",

demo-shell-ng2/resources/i18n/en.json

@@ -21,5 +21,8 @@
                 "CUSTOM": "Custom action"
             }
         }
+    },
+    "ANALYTICS_REPORT":{
+        "NO_REPORT_MESSAGE":"No report selected. Choose a report from the list"
     }
 }

ng2-components/config/karma.conf-all.js

@@ -1,4 +1,5 @@
-var webpackConfig = require('./webpack.test');
+const webpackCoverage = require('./webpack.coverage');
+const helpers = require('./helpers');
 
 module.exports = function (config) {
     var _config = {
@@ -8,28 +9,42 @@ module.exports = function (config) {
 
         files: [
             {pattern: './node_modules/hammerjs/hammer.min.js', included: true, watched: false},
+            {
+                pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+                included: true,
+                watched: false
+            },
 
             //diagrams
             {pattern: './node_modules/chart.js/dist/Chart.js', included: true, watched: false},
             {pattern: './node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
             {pattern: './node_modules/raphael/raphael.min.js', included: true, watched: false},
             {pattern: './node_modules/moment/min/moment.min.js', included: true, watched: false},
-            {pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js', included: true, watched: false},
+            {
+                pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js',
+                included: true,
+                watched: false
+            },
 
             {pattern: './node_modules/ng2-translate/ng2-translate.js', included: false, watched: false},
-            {pattern: './node_modules/ng2-charts/bundles/ng2-charts.umd.js', included: false, served: true, watched: false},
+            {
+                pattern: './node_modules/ng2-charts/bundles/ng2-charts.umd.js',
+                included: false,
+                served: true,
+                watched: false
+            },
 
             // pdf-js
             {pattern: './node_modules/pdfjs-dist/build/pdf.js', included: true, watched: false},
             {pattern: './node_modules/pdfjs-dist/build/pdf.worker.js', included: true, watched: false},
             {pattern: './node_modules/pdfjs-dist/web/pdf_viewer.js', included: true, watched: false},
 
-            {pattern:  config.component +'/karma-test-shim.js', watched: false},
+            {pattern: config.component + '/karma-test-shim.js', watched: false},
             {pattern: './ng2-**/src/assets/**/*.*', included: false, served: true, watched: false},
             {pattern: './ng2-**/src/**/*.ts', included: false, served: true, watched: false}
         ],
 
-        webpack: webpackConfig,
+        webpack: webpackCoverage(config),
 
         webpackMiddleware: {
             noInfo: true,
@@ -53,12 +68,21 @@ module.exports = function (config) {
         browserDisconnectTolerance: 10,
         browserNoActivityTimeout: 3000000,
 
-        browsers: ['Chrome'],
+        browsers: ['Chrome_headless', 'Chrome'],
 
         customLaunchers: {
             Chrome_travis_ci: {
                 base: 'Chrome',
                 flags: ['--no-sandbox']
+            },
+            Chrome_headless: {
+                base: 'Chrome',
+                flags: [
+                    '--no-sandbox',
+                    '--headless',
+                    '--disable-gpu',
+                    '--remote-debugging-port=9222'
+                ]
             }
         },
 
@@ -88,7 +112,7 @@ module.exports = function (config) {
 
         coverageReporter: {
             includeAllSources: true,
-            dir: './coverage/',
+            dir: './coverage/' + config.component + '/',
             subdir: 'report',
             reporters: [
                 {type: 'text'},

ng2-components/config/webpack.build.js

@@ -4,6 +4,23 @@ const commonConfig = require('./webpack.common.js');
 
 module.exports = webpackMerge(commonConfig, {
 
+    // require those dependencies but don't bundle them
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        'ng2-charts',
+        'alfresco-js-api',
+        'ng2-alfresco-core',
+        'ng2-alfresco-datatable',
+        'ng2-activiti-analytics',
+        'ng2-activiti-diagrams',
+        'ng2-activiti-form',
+        "ng2-activiti-tasklist",
+        'ng2-alfresco-documentlist'
+    ],
+
     output: {
         filename: '[name]/bundles/[name].js',
         library: '[name]',

ng2-components/config/webpack.common.js

@@ -2,6 +2,28 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 const fs = require('fs');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams',
+    'ng2-activiti-form',
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-login',
+    'ng2-alfresco-search',
+    'ng2-alfresco-social',
+    'ng2-alfresco-tag',
+    'ng2-alfresco-upload',
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-viewer',
+    'ng2-alfresco-webscript'
+];
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = {
 
@@ -14,22 +36,28 @@ module.exports = {
         }
     },
 
-    // require those dependencies but don't bundle them
-    externals: [
-        /^\@angular\//,
-        /^rxjs\//,
-        'moment',
-        'raphael',
-        'ng2-charts',
-        'alfresco-js-api',
-        'ng2-alfresco-core',
-        'ng2-alfresco-datatable',
-        'ng2-activiti-analytics',
-        'ng2-activiti-diagrams',
-        'ng2-activiti-form',
-        "ng2-activiti-tasklist",
-        'ng2-alfresco-documentlist'
-    ],
+    resolve: {
+        alias: {
+            "ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics": path.resolve(__dirname, '../ng2-activiti-analytics/index.ts'),
+            "ng2-activiti-form": path.resolve(__dirname, '../ng2-activiti-form/index.ts'),
+            "ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist/index.ts'),
+            "ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist/index.ts'),
+            "ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist/index.ts'),
+            "ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login/index.ts'),
+            "ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search/index.ts'),
+            "ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social/index.ts'),
+            "ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag/index.ts'),
+            "ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload/index.ts'),
+            "ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer/index.ts'),
+            "ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript/index.ts'),
+            "ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
 
     module: {
         rules: [
@@ -51,18 +79,13 @@ module.exports = {
                 loader: 'tslint-loader',
                 options: {
                     emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                    failOnHint: true
                 },
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
                 test: /\.ts$/,
-                use: ['ts-loader?' + JSON.stringify({
-                    "compilerOptions": {
-                        "typeRoots": [
-                            "../node_modules/@types"
-                        ]}
-                }), 'angular2-template-loader'],
+                loader: ['ts-loader', 'angular2-template-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
             {
@@ -74,7 +97,12 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            }, {
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
@@ -82,7 +110,7 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, './assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/]
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -102,30 +130,16 @@ module.exports = {
         ]
     },
 
-    resolve: {
-        alias: {
-            "ng2-alfresco-core": path.resolve(__dirname, '../ng2-alfresco-core/index.ts'),
-            "ng2-alfresco-datatable": path.resolve(__dirname, '../ng2-alfresco-datatable/index.ts'),
-            "ng2-activiti-diagrams": path.resolve(__dirname, '../ng2-activiti-diagrams/index.ts'),
-            "ng2-activiti-analytics":path.resolve(__dirname, '../ng2-activiti-analytics/index.ts'),
-            "ng2-activiti-form":path.resolve(__dirname, '../ng2-activiti-form/index.ts'),
-            "ng2-activiti-tasklist": path.resolve(__dirname, '../ng2-activiti-tasklist/index.ts'),
-            "ng2-activiti-processlist": path.resolve(__dirname, '../ng2-activiti-processlist/index.ts'),
-            "ng2-alfresco-documentlist": path.resolve(__dirname, '../ng2-alfresco-documentlist/index.ts'),
-            "ng2-alfresco-login": path.resolve(__dirname, '../ng2-alfresco-login/index.ts'),
-            "ng2-alfresco-search": path.resolve(__dirname, '../ng2-alfresco-search/index.ts'),
-            "ng2-alfresco-social": path.resolve(__dirname, '../ng2-alfresco-social/index.ts'),
-            "ng2-alfresco-tag": path.resolve(__dirname, '../ng2-alfresco-tag/index.ts'),
-            "ng2-alfresco-upload": path.resolve(__dirname, '../ng2-alfresco-upload/index.ts'),
-            "ng2-alfresco-viewer": path.resolve(__dirname, '../ng2-alfresco-viewer/index.ts'),
-            "ng2-alfresco-webscript": path.resolve(__dirname, '../ng2-alfresco-webscript/index.ts'),
-            "ng2-alfresco-userinfo": path.resolve(__dirname, '../ng2-alfresco-userinfo/index.ts')
-        },
-        extensions: ['.ts', '.js'],
-            modules: [helpers.root('node_modules')]
-    },
-
     plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    from: `${lib}/src/i18n/`,
+                    to: `${lib}/bundles/assets/${lib}/i18n/`
+                }
+            })
+        ]),
+
         new webpack.NoEmitOnErrorsPlugin(),
 
         new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.txt'), 'utf8')),
@@ -134,7 +148,17 @@ module.exports = {
             /angular(\\|\/)core(\\|\/)@angular/,
             helpers.root('./src'),
             {}
-        )
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
     ],
 
     node: {

ng2-components/config/webpack.coverage.js

@@ -0,0 +1,26 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('./webpack.test.js');
+const helpers = require('./helpers');
+
+module.exports = function (config) {
+    return webpackMerge(testConfig, {
+
+        devtool: 'inline-source-map',
+
+        module: {
+            rules: [
+                {
+                    enforce: 'post',
+                    test: /^(?!(.*spec|index|.*mock|.*model|.*event)).*\.ts?$/,
+                    loader: 'istanbul-instrumenter-loader',
+                    include: [helpers.root(config.component + '/src')],
+                    exclude: [
+                        /node_modules/,
+                        /test/
+                    ]
+                }
+            ]
+        }
+    });
+};

ng2-components/config/webpack.test.js

@@ -1,37 +1,15 @@
-const webpack = require('webpack');
 const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
 
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-
-module.exports = {
+module.exports = webpackMerge(commonConfig, {
 
     devtool: 'inline-source-map',
 
     module: {
         rules: [
             {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.ts$/,
-                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), 'angular2-template-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.css$/,
-                loader: ['to-string-loader', 'css-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
+                test: /\.(txt|pdf)$/,
                 loader: 'file-loader',
                 query: {
                     name: '[path][name].[ext]',
@@ -39,47 +17,7 @@ module.exports = {
                         return url.replace('src', 'dist');
                     }
                 }
-            },
-            {
-                enforce: 'post',
-                test: /\.ts$/,
-                loader: 'istanbul-instrumenter-loader',
-                exclude: [
-                    /node_modules/,
-                    /test/
-                ]
             }
         ]
-    },
-
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
-
-    plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
-
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)@angular/,
-            helpers.root('./src'),
-            {}
-        ),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-                htmlLoader: {
-                    minimize: false // workaround for ng2
-                }
-        })
-    ],
-
-    node: {
-        fs: 'empty',
-        module: false
     }
-};
+});

ng2-components/ng2-activiti-analytics/.gitignore

@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js

ng2-components/ng2-activiti-analytics/README.md

@@ -305,12 +305,6 @@ npm install
 npm run build
 ```
 
-### Build the files and keep watching for changes
-
-```sh
-$ npm run build:w
-```
-
 ## Running unit tests
 
 ```sh

ng2-components/ng2-activiti-analytics/config/webpack.build.js

@@ -0,0 +1,35 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-source-map',
+
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        'ng2-charts',
+        'alfresco-js-api',
+        'ng2-alfresco-core',
+        'ng2-alfresco-datatable',
+        'ng2-activiti-analytics',
+        'ng2-activiti-diagrams',
+        'ng2-activiti-form',
+        "ng2-activiti-tasklist",
+        'ng2-alfresco-documentlist'
+    ],
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-analytics": "./index.ts"
+    }
+});

ng2-components/ng2-activiti-analytics/config/webpack.common.js

@@ -2,6 +2,9 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 const fs = require('fs');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = {
 
@@ -12,22 +15,15 @@ module.exports = {
         }
     },
 
-    // require those dependencies but don't bundle them
-    externals: [
-        /^\@angular\//,
-        /^rxjs\//,
-        'moment',
-        'raphael',
-        'ng2-charts',
-        'alfresco-js-api',
-        'ng2-alfresco-core',
-        'ng2-alfresco-datatable',
-        'ng2-activiti-analytics',
-        'ng2-activiti-diagrams',
-        'ng2-activiti-form',
-        "ng2-activiti-tasklist",
-        'ng2-alfresco-documentlist'
-    ],
+    resolve: {
+        alias: {
+            "ng2-alfresco-core": helpers.root('../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams": helpers.root('../ng2-activiti-diagrams/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../../ng2-components'), helpers.root('node_modules')]
+    },
 
     module: {
         rules: [
@@ -37,19 +33,13 @@ module.exports = {
                 loader: 'source-map-loader',
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
-            {
-                enforce: 'pre',
-                test: /\.ts$/,
-                use: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
             {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'tslint-loader',
                 options: {
                     emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                    failOnHint: true
                 },
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
@@ -67,7 +57,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
@@ -75,7 +71,7 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, './assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ]
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -95,15 +91,12 @@ module.exports = {
         ]
     },
 
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [
-            '../ng2-components', 'node_modules'
-        ]
-    },
-
     plugins: [
+        new CopyWebpackPlugin([{
+            from: `src/i18n/`,
+            to: `bundles/assets/${path.basename(helpers.root(''))}/i18n/`
+        }]),
+
         new webpack.NoEmitOnErrorsPlugin(),
 
         new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.txt'), 'utf8')),
@@ -112,11 +105,19 @@ module.exports = {
             /angular(\\|\/)core(\\|\/)@angular/,
             helpers.root('./src'),
             {}
-        )
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+                htmlLoader: {
+                    minimize: false // workaround for ng2
+                }
+        })
     ],
 
-    devtool: 'cheap-module-source-map',
-
     node: {
         fs: 'empty',
         module: false

ng2-components/ng2-activiti-analytics/config/webpack.coverage.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('./webpack.test.js');
+const helpers = require('./helpers');
+
+module.exports = webpackMerge(testConfig, {
+
+    module: {
+        rules: [
+            {
+                enforce: 'post',
+                test: /^(?!(.*spec|index|.*mock|.*model|.*event)).*\.ts?$/,
+                include: [helpers.root('src')],
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    }
+});

ng2-components/ng2-activiti-analytics/config/webpack.test.js

@@ -1,85 +1,8 @@
-const webpack = require('webpack');
 const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
 
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+module.exports = webpackMerge(commonConfig, {
 
-module.exports = {
-
-    devtool: 'inline-source-map',
-
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
-
-    module: {
-        rules: [
-            {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.ts$/,
-                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), 'angular2-template-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.css$/,
-                loader: ['to-string-loader', 'css-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
-                loader: 'file-loader',
-                query: {
-                    name: '[path][name].[ext]',
-                    outputPath: (url)=> {
-                        return url.replace('src', 'dist');
-                    }
-                }
-            },
-            {
-                enforce: 'post',
-                test: /\.ts$/,
-                loader: 'istanbul-instrumenter-loader',
-                exclude: [
-                    /node_modules/,
-                    /test/
-                ]
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
-
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)@angular/,
-            helpers.root('./src'),
-            {}
-        ),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-                htmlLoader: {
-                    minimize: false // workaround for ng2
-                }
-        })
-    ],
-
-    node: {
-        fs: 'empty',
-        module: false
-    }
-};
+    devtool: 'inline-source-map'
+});

ng2-components/ng2-activiti-analytics/demo/config/helpers.js

@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;

ng2-components/ng2-activiti-analytics/demo/config/webpack.common.js

@@ -0,0 +1,127 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            }
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};

ng2-components/ng2-activiti-analytics/demo/config/webpack.dev.js

@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics$": path.resolve(__dirname, '../../ng2-activiti-analytics/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});

ng2-components/ng2-activiti-analytics/demo/config/webpack.prod.js

@@ -0,0 +1,66 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});

ng2-components/ng2-activiti-analytics/demo/index.html

@@ -6,51 +6,8 @@
     <title>Alfresco Angular 2 Activiti Analytics - Demo</title>
     <base href="./">
 
-    <!-- Charts -->
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-
-    <!-- Moment js -->
-    <script src="node_modules/moment/min/moment.min.js"></script>
-
-    <!-- Date picker -->
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.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" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<style> .chart {display: block; width: 100%;}</style>
-
-
 <body>
 
 <alfresco-app-demo></alfresco-app-demo>

ng2-components/ng2-activiti-analytics/demo/package.json

@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Diagrams Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams ng2-activiti-analytics",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -71,10 +68,54 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }

ng2-components/ng2-activiti-analytics/demo/src/polyfills.ts

@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}

ng2-components/ng2-activiti-analytics/demo/src/vendor.ts

@@ -0,0 +1,30 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-analytics';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script-loader!raphael/raphael.min.js');
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';

ng2-components/ng2-activiti-analytics/demo/systemjs.config.js

@@ -1,57 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-charts': 'npm:ng2-charts',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { main: './bundles/ng2-charts.umd.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './bundles/ng2-activiti-analytics.js', defaultExtension: 'js'}
-        }
-    });
-})(this);

ng2-components/ng2-activiti-analytics/demo/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,

ng2-components/ng2-activiti-analytics/demo/tslint.json

@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }

ng2-components/ng2-activiti-analytics/demo/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');

ng2-components/ng2-activiti-analytics/index.ts

@@ -16,6 +16,7 @@
  */
 
 import { NgModule, ModuleWithProviders } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DiagramsModule } from 'ng2-activiti-diagrams';
 
@@ -36,6 +37,9 @@ export * from './src/components/analytics-report-parameters.component';
 export * from './src/services/analytics.service';
 export * from './src/components/widgets/index';
 
+// exporting models
+export * from './src/models/index';
+
 export const ANALYTICS_DIRECTIVES: any[] = [
     AnalyticsComponent,
     AnalyticsReportListComponent,
@@ -53,7 +57,10 @@ export const ANALYTICS_PROVIDERS: any[] = [
     imports: [
         CoreModule,
         ChartsModule,
-        DiagramsModule
+        DiagramsModule,
+        MdTooltipModule,
+        MdButtonModule,
+        MdIconModule
     ],
     declarations: [
         ...ANALYTICS_DIRECTIVES
@@ -62,7 +69,10 @@ export const ANALYTICS_PROVIDERS: any[] = [
         ...ANALYTICS_PROVIDERS
     ],
     exports: [
-        ...ANALYTICS_DIRECTIVES
+        ...ANALYTICS_DIRECTIVES,
+        MdTooltipModule,
+        MdButtonModule,
+        MdIconModule
     ]
 })
 export class AnalyticsModule {

ng2-components/ng2-activiti-analytics/karma.conf.js

@@ -8,6 +8,7 @@ module.exports = function (config) {
 
     files: [
       './node_modules/hammerjs/hammer.js',
+      {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: false},
 
       //diagrams
       './node_modules/chart.js/dist/Chart.js',
@@ -27,7 +28,7 @@ module.exports = function (config) {
       {pattern: './src/**/*.ts', included: false, served: true, watched: false}
     ],
 
-    webpack: webpackConfig,
+    webpack: (config.mode === 'coverage') ? require('./webpack.coverage') : require('./webpack.test'),
 
     webpackMiddleware: {
       stats: 'errors-only'

ng2-components/ng2-activiti-analytics/package.json

@@ -7,7 +7,7 @@
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
     "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --mode coverage",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
     "prepublish" : "npm run build"
@@ -41,7 +41,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
@@ -108,7 +108,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "tag",

ng2-components/ng2-activiti-analytics/src/assets/analytics.service.mock.ts

@@ -25,4 +25,3 @@ export let fakeReportList = [
         name: 'Fake Report 2'
     }
 ];
-

ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts

@@ -17,6 +17,7 @@
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, MdIconModule } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import { ChartsModule } from 'ng2-charts';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -59,7 +60,11 @@ describe('AnalyticsGeneratorComponent', () => {
         TestBed.configureTestingModule({
             imports: [
                 CoreModule.forRoot(),
+                MdTooltipModule,
+                MdButtonModule,
+                MdIconModule,
                 ChartsModule,
+
                 DiagramsModule.forRoot()
             ],
             declarations: [

ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.ts

@@ -67,7 +67,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
                 private logService: LogService) {
         logService.info('AnalyticsGeneratorComponent');
         if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
         }
     }
 

ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts

@@ -46,7 +46,7 @@ export class AnalyticsReportHeatMapComponent implements  OnInit {
                 private analyticsService: AnalyticsService,
                 private formBuilder: FormBuilder) {
         if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
         }
     }
 

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts

@@ -28,14 +28,14 @@ declare let jasmine: any;
 describe('AnalyticsReportListComponent', () => {
 
     let reportList = [
-        {'id': 2002, 'name': 'Fake Test Process definition heat map'},
-        {'id': 2003, 'name': 'Fake Test Process definition overview'},
-        {'id': 2004, 'name': 'Fake Test Process instances overview'},
-        {'id': 2005, 'name': 'Fake Test Task overview'},
-        {'id': 2006, 'name': 'Fake Test Task service level agreement'}
+        { 'id': 2002, 'name': 'Fake Test Process definition heat map' },
+        { 'id': 2003, 'name': 'Fake Test Process definition overview' },
+        { 'id': 2004, 'name': 'Fake Test Process instances overview' },
+        { 'id': 2005, 'name': 'Fake Test Task overview' },
+        { 'id': 2006, 'name': 'Fake Test Task service level agreement' }
     ];
 
-    let reportSelected = {'id': 2003, 'name': 'Fake Test Process definition overview'};
+    let reportSelected = { 'id': 2003, 'name': 'Fake Test Process definition overview' };
 
     let component: AnalyticsReportListComponent;
     let fixture: ComponentFixture<AnalyticsReportListComponent>;
@@ -57,7 +57,9 @@ describe('AnalyticsReportListComponent', () => {
 
         let translateService = TestBed.get(AlfrescoTranslationService);
         spyOn(translateService, 'addTranslationFolder').and.stub();
-        spyOn(translateService, 'get').and.callFake((key) => { return Observable.of(key); });
+        spyOn(translateService, 'get').and.callFake((key) => {
+            return Observable.of(key);
+        });
     }));
 
     beforeEach(() => {
@@ -174,13 +176,13 @@ describe('AnalyticsReportListComponent', () => {
 
         it('Should return false if the current report is different', () => {
             component.selectReport(reportSelected);
-            let anotherReport = {'id': 111, 'name': 'Another Fake Test Process definition overview'};
+            let anotherReport = { 'id': 111, 'name': 'Another Fake Test Process definition overview' };
             expect(component.isSelected(anotherReport)).toBe(false);
         });
 
         it('Should reload the report list', (done) => {
             component.initObserver();
-            let report = new ReportParametersModel({'id': 2002, 'name': 'Fake Test Process definition heat map'});
+            let report = new ReportParametersModel({ 'id': 2002, 'name': 'Fake Test Process definition heat map' });
             component.reports = [report];
             expect(component.reports.length).toEqual(1);
             component.reload();
@@ -197,6 +199,27 @@ describe('AnalyticsReportListComponent', () => {
             });
         });
 
+        it('Should reload the report list and select the report with the given id', (done) => {
+            component.initObserver();
+            expect(component.reports.length).toEqual(0);
+
+            component.reload(2002);
+
+            component.onSuccess.subscribe(() => {
+                expect(component.reports.length).toEqual(5);
+                expect(component.currentReport).toBeDefined();
+                expect(component.currentReport).not.toBeNull();
+                expect(component.currentReport.id).toEqual(2002);
+                done();
+            });
+
+            jasmine.Ajax.requests.mostRecent().respondWith({
+                status: 200,
+                contentType: 'json',
+                responseText: reportList
+            });
+        });
+
     });
 
     describe('layout', () => {

ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts

@@ -26,7 +26,7 @@ import { ReportParametersModel } from '../models/report.model';
     templateUrl: './analytics-report-list.component.html',
     styleUrls: ['./analytics-report-list.component.css']
 })
-export class AnalyticsReportListComponent implements  OnInit {
+export class AnalyticsReportListComponent implements OnInit {
 
     public static LAYOUT_LIST: string = 'LIST';
     public static LAYOUT_GRID: string = 'GRID';
@@ -76,15 +76,15 @@ export class AnalyticsReportListComponent implements  OnInit {
     /**
      * Reload the component
      */
-    reload() {
+    reload(reportId?) {
         this.reset();
-        this.getReportList(this.appId);
+        this.getReportList(this.appId, reportId);
     }
 
     /**
      * Get the report list
      */
-    getReportList(appId: string) {
+    getReportList(appId: string, reportId?: string) {
         this.analyticsService.getReportList(appId).subscribe(
             (res: ReportParametersModel[]) => {
                 if (res && res.length === 0) {
@@ -93,6 +93,10 @@ export class AnalyticsReportListComponent implements  OnInit {
                     res.forEach((report) => {
                         this.reportObserver.next(report);
                     });
+                    if (reportId) {
+                        console.log('SELEZIONO IL REPORT!');
+                        this.selectReportByReportId(reportId);
+                    }
                     if (this.selectFirst) {
                         this.selectFirstReport();
                     }
@@ -149,6 +153,14 @@ export class AnalyticsReportListComponent implements  OnInit {
         this.reportClick.emit(report);
     }
 
+    public selectReportByReportId(reportId) {
+        let reportFound = this.reports.find(report => report.id === reportId);
+        if (reportFound) {
+            this.currentReport = reportFound;
+            this.reportClick.emit(reportFound);
+        }
+    }
+
     selectFirstReport() {
         this.selectReport(this.reports[0]);
         this.selectFirst = false;

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts

@@ -17,6 +17,7 @@
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DebugElement, SimpleChange } from '@angular/core';
+import { MdTooltipModule, MdButtonModule, OVERLAY_PROVIDERS } from '@angular/material';
 import { Observable } from 'rxjs/Rx';
 import * as moment from 'moment';
 import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
@@ -42,14 +43,17 @@ describe('AnalyticsReportParametersComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MdTooltipModule,
+                MdButtonModule
             ],
             declarations: [
                 AnalyticsReportParametersComponent,
                 ...WIDGET_DIRECTIVES
             ],
             providers: [
-                AnalyticsService
+                AnalyticsService,
+                OVERLAY_PROVIDERS
             ]
         }).compileComponents();
 
@@ -483,7 +487,7 @@ describe('AnalyticsReportParametersComponent', () => {
                 validForm = true;
             });
 
-            xit('Should be able to change the report title', (done) => {
+            it('Should be able to change the report title', (done) => {
 
                 let title: HTMLElement = element.querySelector('h4');
                 title.click();
@@ -495,7 +499,7 @@ describe('AnalyticsReportParametersComponent', () => {
                 reportName.focus();
                 component.reportParameters.name = 'FAKE_TEST_NAME';
                 reportName.value = 'FAKE_TEST_NAME';
-                reportName.blur();
+                reportName.dispatchEvent(new Event('blur'));
 
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -510,13 +514,13 @@ describe('AnalyticsReportParametersComponent', () => {
                     contentType: 'json',
                     responseText: analyticParamsMock.reportDefParamStatus
                 });
-
             });
 
             it('Should show a dialog to allowing report save', async(() => {
-                component.saveReportSuccess.subscribe(() => {
+                component.saveReportSuccess.subscribe((repId) => {
                     let reportDialogTitle: HTMLElement = <HTMLElement>element.querySelector('#report-dialog');
                     expect(reportDialogTitle.getAttribute('open')).toBeNull();
+                    expect(repId).toBe('1');
                 });
 
                 component.submit(values);

ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts

@@ -110,7 +110,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
                 private logService: LogService,
                 private contentService: ContentService) {
         if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
         }
     }
 
@@ -372,7 +372,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
 
     doSave(paramQuery: ReportQuery) {
         this.analyticsService.saveReport(this.reportId, paramQuery).subscribe(() => {
-            this.saveReportSuccess.emit();
+            this.saveReportSuccess.emit(this.reportId);
         });
     }
 

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

@@ -3,7 +3,7 @@
                                  [hideComponent]="hideParameters"
                                  (onFormValueChanged)="reset()"
                                  (onSuccess)="showReport($event)"
-                                 (saveReportSuccess)="onSaveReportSuccess()"
+                                 (saveReportSuccess)="onSaveReportSuccess($event)"
                                  (deleteReportSuccess)="onDeleteReportSuccess()"
                                  (onEdit)="onEditReport($event)">
     </analytics-report-parameters>

ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts

@@ -59,7 +59,7 @@ export class AnalyticsComponent implements OnChanges {
                 private logService: LogService) {
         logService.info('AnalyticsComponent');
         if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-analytics', 'node_modules/ng2-activiti-analytics/src');
+            translateService.addTranslationFolder('ng2-activiti-analytics', 'assets/ng2-activiti-analytics');
         }
     }
 
@@ -79,8 +79,8 @@ export class AnalyticsComponent implements OnChanges {
         this.editReport.emit(name);
     }
 
-    public onSaveReportSuccess() {
-        this.reportSaved.emit();
+    public onSaveReportSuccess(reportId) {
+        this.reportSaved.emit(reportId);
     }
 
     public onDeleteReportSuccess() {

ng2-components/ng2-activiti-analytics/src/models/index.ts

@@ -0,0 +1,19 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './chart.model';
+export * from './report.model';

ng2-components/ng2-activiti-analytics/src/services/analytics.service.spec.ts

@@ -15,11 +15,8 @@
  * limitations under the License.
  */
 
-import { ReflectiveInjector } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { async } from '@angular/core/testing';
-import { CoreModule, AlfrescoApiService, LogService } from 'ng2-alfresco-core';
-import { ReportParametersModel, ParameterValueModel } from '../models/report.model';
+import { CoreModule, AlfrescoApiService } from 'ng2-alfresco-core';
 import { AnalyticsService } from './analytics.service';
 import { fakeReportList } from '../assets/analytics.service.mock';
 

ng2-components/ng2-activiti-analytics/webpack.build.js

@@ -1,17 +1 @@
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const commonConfig = require('./config/webpack.common.js');
-
-module.exports = webpackMerge(commonConfig, {
-
-    output: {
-        filename: './bundles/[name].js',
-        library: '[name]',
-        libraryTarget: 'umd',
-        chunkFilename: '[id].chunk.js'
-    },
-
-    entry: {
-        "ng2-activiti-analytics": "./index.ts"
-    }
-});
+module.exports = require('./config/webpack.build.js');

ng2-components/ng2-activiti-analytics/webpack.coverage.js

@@ -0,0 +1 @@
+module.exports = require('./config/webpack.coverage.js');

ng2-components/ng2-activiti-analytics/webpack.test.js

@@ -1,8 +1 @@
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const testConfig = require('./config/webpack.test.js');
-
-module.exports = webpackMerge(testConfig, {
-
-
-});
+module.exports = require('./config/webpack.test.js');

ng2-components/ng2-activiti-diagrams/.gitignore

@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js

ng2-components/ng2-activiti-diagrams/README.md

@@ -184,12 +184,6 @@ npm install
 npm run build
 ```
 
-### Build the files and keep watching for changes
-
-```sh
-$ npm run build:w
-```
-
 ## Running unit tests
 
 ```sh

ng2-components/ng2-activiti-diagrams/config/webpack.build.js

@@ -0,0 +1,35 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-source-map',
+
+    externals: [
+        /^\@angular\//,
+        /^rxjs\//,
+        'moment',
+        'raphael',
+        'ng2-charts',
+        'alfresco-js-api',
+        'ng2-alfresco-core',
+        'ng2-alfresco-datatable',
+        'ng2-activiti-analytics',
+        'ng2-activiti-diagrams',
+        'ng2-activiti-form',
+        "ng2-activiti-tasklist",
+        'ng2-alfresco-documentlist'
+    ],
+
+    output: {
+        filename: './bundles/[name].js',
+        library: '[name]',
+        libraryTarget: 'umd',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    entry: {
+        "ng2-activiti-diagrams": "./index.ts"
+    }
+});

ng2-components/ng2-activiti-diagrams/config/webpack.common.js

@@ -2,6 +2,9 @@ const webpack = require('webpack');
 const helpers = require('./helpers');
 const fs = require('fs');
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
 
 module.exports = {
 
@@ -12,22 +15,14 @@ module.exports = {
         }
     },
 
-    // require those dependencies but don't bundle them
-    externals: [
-        /^\@angular\//,
-        /^rxjs\//,
-        'moment',
-        'raphael',
-        'ng2-charts',
-        'alfresco-js-api',
-        'ng2-alfresco-core',
-        'ng2-alfresco-datatable',
-        'ng2-activiti-analytics',
-        'ng2-activiti-diagrams',
-        'ng2-activiti-form',
-        "ng2-activiti-tasklist",
-        'ng2-alfresco-documentlist'
-    ],
+    resolve: {
+        alias: {
+            "ng2-alfresco-core": helpers.root('../ng2-alfresco-core/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        symlinks: false,
+        modules: [helpers.root('../../ng2-components'), helpers.root('node_modules')]
+    },
 
     module: {
         rules: [
@@ -37,19 +32,13 @@ module.exports = {
                 loader: 'source-map-loader',
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
-            {
-                enforce: 'pre',
-                test: /\.ts$/,
-                use: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
             {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'tslint-loader',
                 options: {
                     emitErrors: true,
-                    configFile: path.resolve(__dirname, './assets/tslint.json')
+                    failOnHint: true
                 },
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
             },
@@ -67,7 +56,13 @@ module.exports = {
                 test: /\.css$/,
                 loader: ['to-string-loader', 'css-loader'],
                 exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },{
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader'],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+            },
+            {
                 enforce: 'pre',
                 test: /\.ts$/,
                 loader: 'license-check',
@@ -75,7 +70,7 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, './assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/ ],
+                exclude: [/node_modules/, /bundles/, /dist/, /demo/, /rendering-queue.services.ts/],
             },
             {
                 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
@@ -95,15 +90,12 @@ module.exports = {
         ]
     },
 
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [
-            '../ng2-components', 'node_modules'
-        ]
-    },
-
     plugins: [
+        new CopyWebpackPlugin([{
+            from: `src/i18n/`,
+            to: `bundles/assets/${path.basename(helpers.root(''))}/i18n/`
+        }]),
+
         new webpack.NoEmitOnErrorsPlugin(),
 
         new webpack.BannerPlugin(fs.readFileSync(path.resolve(__dirname, './assets/license_header_add.txt'), 'utf8')),
@@ -112,11 +104,19 @@ module.exports = {
             /angular(\\|\/)core(\\|\/)@angular/,
             helpers.root('./src'),
             {}
-        )
+        ),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
     ],
 
-    devtool: 'cheap-module-source-map',
-
     node: {
         fs: 'empty',
         module: false

ng2-components/ng2-activiti-diagrams/config/webpack.coverage.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const testConfig = require('./webpack.test.js');
+const helpers = require('./helpers');
+
+module.exports = webpackMerge(testConfig, {
+
+    module: {
+        rules: [
+            {
+                enforce: 'post',
+                test: /^(?!(.*spec|index|.*mock|.*model|.*event)).*\.ts?$/,
+                include: [helpers.root('src')],
+                loader: 'istanbul-instrumenter-loader',
+                exclude: [
+                    /node_modules/,
+                    /test/
+                ]
+            }
+        ]
+    }
+});

ng2-components/ng2-activiti-diagrams/config/webpack.test.js

@@ -1,85 +1,8 @@
-const webpack = require('webpack');
 const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common.js');
 
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+module.exports = webpackMerge(commonConfig, {
 
-module.exports = {
-
-    devtool: 'inline-source-map',
-
-    resolve: {
-        extensions: ['.ts', '.js'],
-        symlinks: false,
-        modules: [helpers.root('../ng2-components'), helpers.root('node_modules')]
-    },
-
-    module: {
-        rules: [
-            {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.ts$/,
-                loaders: ['ts-loader?' + JSON.stringify({ transpileOnly: true}), 'angular2-template-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.html$/,
-                loader: 'html-loader',
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.css$/,
-                loader: ['to-string-loader', 'css-loader'],
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
-            },
-            {
-                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|pdf)$/,
-                loader: 'file-loader',
-                query: {
-                    name: '[path][name].[ext]',
-                    outputPath: (url)=> {
-                        return url.replace('src', 'dist');
-                    }
-                }
-            },
-            {
-                enforce: 'post',
-                test: /\.ts$/,
-                loader: 'istanbul-instrumenter-loader',
-                exclude: [
-                    /node_modules/,
-                    /test/
-                ]
-            }
-        ]
-    },
-
-    plugins: [
-        new webpack.NoEmitOnErrorsPlugin(),
-
-        new webpack.ContextReplacementPlugin(
-            /angular(\\|\/)core(\\|\/)@angular/,
-            helpers.root('./src'),
-            {}
-        ),
-        new webpack.DefinePlugin({
-            'process.env': {
-                'ENV': JSON.stringify(ENV)
-            }
-        }),
-        new webpack.LoaderOptionsPlugin({
-                htmlLoader: {
-                    minimize: false // workaround for ng2
-                }
-        })
-    ],
-
-    node: {
-        fs: 'empty',
-        module: false
-    }
-};
+    devtool: 'inline-source-map'
+});

ng2-components/ng2-activiti-diagrams/demo/config/helpers.js

@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;

ng2-components/ng2-activiti-diagrams/demo/config/webpack.common.js

@@ -0,0 +1,126 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-diagrams'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            }
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};

ng2-components/ng2-activiti-diagrams/demo/config/webpack.dev.js

@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-activiti-diagrams/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});

ng2-components/ng2-activiti-diagrams/demo/config/webpack.prod.js

@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-diagrams'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});

ng2-components/ng2-activiti-diagrams/demo/index.html

@@ -6,40 +6,7 @@
     <title>Alfresco Angular 2 Activiti Diagrams - Demo</title>
     <base href="./">
 
-    <!-- Raphael -->
-    <script src="node_modules/raphael/raphael.min.js"></script>
-    <!-- Diagrams -->
-    <script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.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" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 

ng2-components/ng2-activiti-diagrams/demo/package.json

@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Diagrams Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -62,12 +59,57 @@
     "raphael": "^2.2.6"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }

ng2-components/ng2-activiti-diagrams/demo/src/polyfills.ts

@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}

ng2-components/ng2-activiti-diagrams/demo/src/vendor.ts

@@ -0,0 +1,30 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-diagrams';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script-loader!raphael/raphael.min.js');
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';

ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js

@@ -1,54 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'raphael': 'npm:raphael',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': { defaultExtension: 'js' },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'}
-        }
-    });
-})(this);

ng2-components/ng2-activiti-diagrams/demo/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,

ng2-components/ng2-activiti-diagrams/demo/tslint.json

@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }

ng2-components/ng2-activiti-diagrams/demo/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');

ng2-components/ng2-activiti-diagrams/karma.conf.js

@@ -8,17 +8,16 @@ module.exports = function (config) {
 
     files: [
       './node_modules/hammerjs/hammer.js',
+      {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: false},
 
       //diagrams
       './node_modules/chart.js/dist/Chart.js',
       './node_modules/alfresco-js-api/dist/alfresco-js-api.js',
       './node_modules/raphael/raphael.js',
       './node_modules/moment/min/moment.min.js',
-      './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
 
       {pattern: './node_modules/ng2-translate/**/*.js', included: false, watched: false},
       {pattern: './node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
-      {pattern: './node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false},
       {pattern: './node_modules/moment/**/*.js', included: false, served: true, watched: false},
 
       {pattern: 'karma-test-shim.js', watched: false},
@@ -27,7 +26,7 @@ module.exports = function (config) {
       {pattern: './src/**/*.ts', included: false, served: true, watched: false}
     ],
 
-    webpack: webpackConfig,
+    webpack: (config.mode === 'coverage') ? require('./webpack.coverage') : require('./webpack.test'),
 
     webpackMiddleware: {
       stats: 'errors-only'

ng2-components/ng2-activiti-diagrams/package.json

@@ -7,7 +7,7 @@
     "clean": "rimraf dist node_modules typings bundles coverage .npmrc",
     "rimraf": "rimraf",
     "build": "webpack --config webpack.build.js --progress --profile --bail",
-    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --component",
+    "test": "karma start karma.conf.js --reporters mocha,coverage --single-run --mode coverage",
     "test-browser": "karma start karma.conf.js --reporters kjhtml --component",
     "coverage": "npm run test && wsrv -o -p 9875 ./coverage/report",
     "prepublish" : "npm run build"
@@ -37,7 +37,7 @@
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
 
-    "@angular/material": "2.0.0-beta.1",
+    "@angular/material": "2.0.0-beta.6",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
@@ -99,7 +99,9 @@
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.3.0",
     "webpack-merge": "2.6.1",
-    "wsrv": "^0.1.7"
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "tag",

ng2-components/ng2-activiti-diagrams/src/assets/diagramEvents.mock.ts

@@ -242,7 +242,6 @@ export let endErrorEvent = {
     properties: [{}]
 };
 
-
 export let endErrorEventActive = {
     completed: false,
     current: true,

ng2-components/ng2-activiti-diagrams/src/assets/diagramIntermediate.mock.ts

@@ -52,7 +52,6 @@ export let intermediateCatchingTimeEventCompleted = {
     eventDefinition: {type: 'timer'}
 };
 
-
 export let intermediateCatchingErrorEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'IntermediateCatchEvent',
@@ -127,7 +126,6 @@ export let intermediateCatchingSignalEventCompleted = {
     eventDefinition: {type: 'signal'}
 };
 
-
 export let intermediateCatchingMessageEvent = {
     id: 'sid-C05B7CB7-1CFD-4AE4-9E01-C2C91E35E5A7',
     type: 'IntermediateCatchEvent',

ng2-components/ng2-activiti-diagrams/src/components/diagram.component.spec.ts

@@ -1624,7 +1624,6 @@ describe('Test ng2-activiti-diagrams ', () => {
             });
         }));
 
-
         it('Should render the Start Message Event', async(() => {
             component.onSuccess.subscribe((res) => {
                 fixture.detectChanges();

ng2-components/ng2-activiti-diagrams/src/components/diagram.component.ts

@@ -67,7 +67,7 @@ export class DiagramComponent {
                 private diagramsService: DiagramsService,
                 private logService: LogService) {
         if (translateService) {
-            translateService.addTranslationFolder('ng2-activiti-diagrams', 'node_modules/ng2-activiti-diagrams/src');
+            translateService.addTranslationFolder('ng2-activiti-diagrams', 'assets/ng2-activiti-diagrams');
         }
     }
 

ng2-components/ng2-activiti-diagrams/webpack.build.js

@@ -1,17 +1 @@
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-const commonConfig = require('./config/webpack.common.js');
-
-module.exports = webpackMerge(commonConfig, {
-
-    output: {
-        filename: './bundles/[name].js',
-        library: '[name]',
-        libraryTarget: 'umd',
-        chunkFilename: '[id].chunk.js'
-    },
-
-    entry: {
-        "ng2-activiti-diagrams": "./index.ts"
-    }
-});
+module.exports = require('./config/webpack.build.js');