Merge development branch

# Conflicts:
#	ng2-components/ng2-activiti-tasklist/index.ts
#
ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.com
ponent.spec.ts
#
ng2-components/ng2-activiti-tasklist/src/components/activiti-task-detail
s.component.ts
#
ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.co
mponent.spec.ts
#	ng2-components/ng2-alfresco-login/demo/package.json

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

@@ -1,30 +1,31 @@
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <header class="mdl-layout__header">
         <!-- Tabs -->
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-            <a href="#scroll-tab-0" class="mdl-layout__tab is-active">APPS</a>
-            <a href="#scroll-tab-1" class="mdl-layout__tab">TASK LIST</a>
-            <a href="#scroll-tab-2" class="mdl-layout__tab">PROCESS LIST</a>
-            <a href="#scroll-tab-3" class="mdl-layout__tab">REPORT</a>
+        <div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
+            <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
+            <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
+            <a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
+            <a id="report-header" href="#report" class="mdl-layout__tab">REPORT</a>
         </div>
     </header>
-    <main class="mdl-layout__content activiti">
-        <section class="mdl-layout__tab-panel is-active" id="scroll-tab-0">
+    <main class="mdl-layout__content activiti" #tabmain>
+        <section class="mdl-layout__tab-panel is-active" id="apps">
             <div class="page-content">
                 <activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
             </div>
         </section>
-        <section class="mdl-layout__tab-panel" id="scroll-tab-1">
+        <section class="mdl-layout__tab-panel" id="tasks">
             <div class="page-content">
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
                         <span>Task Filters</span>
+                        <activiti-start-task [appId]="appId" (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
                         <activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
                                           #activitifilter></activiti-filters>
                     </div>
                     <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
                         <span>Task List</span>
-                        <activiti-tasklist *ngIf="isTaskListSelected()" [taskFilter]="taskFilter" [data]="dataTasks"
+                        <activiti-tasklist [taskFilter]="taskFilter" [data]="dataTasks"
                                            (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
                                            #activititasklist></activiti-tasklist>
                     </div>
@@ -36,7 +37,7 @@
                 </div>
             </div>
         </section>
-        <section class="mdl-layout__tab-panel" id="scroll-tab-2">
+        <section class="mdl-layout__tab-panel" id="processes">
             <div class="page-content">
                 <div class="page-content">
                     <div class="mdl-grid">
@@ -61,7 +62,7 @@
                 </div>
             </div>
         </section>
-        <section class="mdl-layout__tab-panel" id="scroll-tab-3">
+        <section class="mdl-layout__tab-panel" id="report">
             <div class="page-content"><!-- Your content goes here --></div>
         </section>
     </main>

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

@@ -20,7 +20,8 @@ import {
     AppDefinitionRepresentationModel,
     FilterRepresentationModel,
     UserTaskFilterRepresentationModel,
-    ActivitiApps
+    ActivitiApps,
+    ActivitiTaskList
 } from 'ng2-activiti-tasklist';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
@@ -40,8 +41,6 @@ declare var componentHandler;
 })
 export class ActivitiDemoComponent implements AfterViewChecked {
 
-    currentChoice: string = 'task-list';
-
     @ViewChild('activitiapps')
     activitiapps: ActivitiApps;
 
@@ -52,7 +51,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     activitidetails: any;
 
     @ViewChild('activititasklist')
-    activititasklist: any;
+    activititasklist: ActivitiTaskList;
 
     @ViewChild('activitiprocessfilter')
     activitiprocessfilter: any;
@@ -63,6 +62,15 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     @ViewChild('activitiprocessdetails')
     activitiprocessdetails: any;
 
+    @ViewChild('tabmain')
+    tabMain: any;
+
+    @ViewChild('tabheader')
+    tabHeader: any;
+
+    @Input()
+    appId: number;
+
     layoutType: string;
     currentTaskId: string;
     currentProcessInstanceId: string;
@@ -78,21 +86,6 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     dataTasks: ObjectDataTableAdapter;
     dataProcesses: ObjectDataTableAdapter;
 
-    @Input()
-    appId: number;
-
-    setChoice($event) {
-        this.currentChoice = $event.target.value;
-    }
-
-    isProcessListSelected() {
-        return this.currentChoice === 'process-list';
-    }
-
-    isTaskListSelected() {
-        return this.currentChoice === 'task-list';
-    }
-
     constructor(private route: ActivatedRoute) {
         this.dataTasks = new ObjectDataTableAdapter(
             [],
@@ -131,6 +124,16 @@ export class ActivitiDemoComponent implements AfterViewChecked {
 
         this.processFilter = null;
         this.currentProcessInstanceId = null;
+
+        this.changeTab('apps', 'tasks');
+    }
+
+    changeTab(origin: string, destination: string) {
+        this.tabMain.nativeElement.children[origin].classList.remove('is-active');
+        this.tabMain.nativeElement.children[destination].classList.add('is-active');
+
+        this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
+        this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
     }
 
     onTaskFilterClick(event: FilterRepresentationModel) {
@@ -141,6 +144,10 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.taskFilter = this.activitifilter.getCurrentFilter();
     }
 
+    onStartTaskSuccess(event: any) {
+        this.activititasklist.reload();
+    }
+
     onSuccessTaskList(event: UserTaskFilterRepresentationModel) {
         this.currentTaskId = this.activititasklist.getCurrentTaskId();
     }

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

@@ -38,7 +38,7 @@ export class LoginDemoComponent implements OnInit {
 
     constructor(public router: Router) {
         this.customValidation = {
-            username: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(15)])],
+            username: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
             password: ['', Validators.required]
         };
     }
@@ -46,7 +46,6 @@ export class LoginDemoComponent implements OnInit {
     ngOnInit() {
         this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
         this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN');
-        this.alfrescologin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
         this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
     }