#440 decouple component and it's demo content

- moved demo-related code to ‘demo app’
- clean alfresco-form component api

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

@@ -0,0 +1,4 @@
+.activiti-task-list__item:hover {
+    cursor: pointer;
+    font-weight: bold;
+}

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

@@ -0,0 +1,22 @@
+<div class="mdl-grid">
+
+    <div class="mdl-cell mdl-cell--2-col">
+        <div *ngIf="!hasTasks()">No tasks found</div>
+        <div *ngIf="hasTasks()">
+            <ul class="mdl-list">
+                <li *ngFor="let task of tasks"
+                    class="mdl-list__item activiti-task-list__item"
+                    (click)="onTaskClicked(task, $event)">
+                    <span class="mdl-list__item-primary-content">
+                    <i class="material-icons mdl-list__item-icon">launch</i>
+                    {{task.name}}
+                </span>
+            </ul>
+        </div>
+    </div>
+
+    <div class="mdl-cell mdl-cell--10-col">
+        <activiti-form [taskId]="selectedTask?.id"></activiti-form>
+    </div>
+
+</div>

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

@@ -15,16 +15,45 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ActivitiForm } from 'ng2-alfresco-activiti-form';
+import { Component, OnInit, AfterViewChecked } from '@angular/core';
+import { ActivitiForm, FormService } from 'ng2-alfresco-activiti-form';
+
+
+declare let __moduleName: string;
+declare var componentHandler;
 
 @Component({
+    moduleId: __moduleName,
     selector: 'activiti-demo',
-    template: `
-        <activiti-form></activiti-form>
-    `,
-    directives: [ActivitiForm]
+    templateUrl: './activiti-demo.component.html',
+    styleUrls: ['./activiti-demo.component.css'],
+    directives: [ActivitiForm],
+    providers: [FormService]
 })
-export class ActivitiDemoComponent {
+export class ActivitiDemoComponent implements OnInit, AfterViewChecked {
+
+    tasks: any[] = [];
+    selectedTask: any;
+
+    hasTasks(): boolean {
+        return this.tasks && this.tasks.length > 0;
+    }
+
+    constructor(private formService: FormService) {}
+
+    ngOnInit() {
+        this.formService.getTasks().subscribe(val => this.tasks = val || []);
+    }
+
+    ngAfterViewChecked() {
+        // workaround for MDL issues with dynamic components
+        if (componentHandler) {
+            componentHandler.upgradeAllRegistered();
+        }
+    }
+
+    onTaskClicked(task, e) {
+        this.selectedTask = task;
+    }
 
 }