New packages org (#2639)

New packages org

demo-shell/src/app.config.json

@@ -0,0 +1,406 @@
+{
+    "ecmHost": "http://{hostname}:{port}",
+    "bpmHost": "http://{hostname}:{port}",
+    "application": {
+        "name": "Alfresco ADF Appplication"
+    },
+    "languages": [
+        {
+            "key": "en",
+            "label": "English"
+        },
+        {
+            "key": "fr",
+            "label": "French"
+        },
+        {
+            "key": "de",
+            "label": "German"
+        },
+        {
+            "key": "it",
+            "label": "Italian"
+        },
+        {
+            "key": "es",
+            "label": "Spanish"
+        },
+        {
+            "key": "ja",
+            "label": "Japanese"
+        },
+        {
+            "key": "nl",
+            "label": "Dutch"
+        },
+        {
+            "key": "pt-BR",
+            "label": "Brazilian Portuguese"
+        },
+        {
+            "key": "nb",
+            "label": "Norwegian"
+        },
+        {
+            "key": "ru",
+            "label": "Russian"
+        },
+        {
+            "key": "zh-CN",
+            "label": "Simplified Chinese"
+        }
+    ],
+    "pagination": {
+        "size": 25
+    },
+    "files": {
+        "excluded": [".DS_Store", "desktop.ini", ".git"]
+    },
+    "logLevel": "trace",
+    "activiti": {
+        "rest": {
+            "fields": [
+                {
+                    "processId": "0",
+                    "taskId": "7501",
+                    "fieldId": "label10",
+                    "values": [
+                        {
+                            "id": "f1",
+                            "name": "Field 1"
+                        },
+                        {
+                            "id": "f2",
+                            "name": "Field 2"
+                        },
+                        {
+                            "id": "f3",
+                            "name": "Field 3"
+                        }
+                    ]
+                }
+            ]
+        }
+    },
+    "document-list": {
+        "supportedPageSizes": [ 5, 10, 15, 20 ],
+        "presets": {
+            "-trashcan-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "archivedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_BY",
+                    "sortable": true
+                }
+            ],
+            "-sites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "title",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "visibility",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
+                    "sortable": true
+                }
+            ],
+            "-mysites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "title",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "visibility",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
+                    "sortable": true
+                }
+            ],
+            "-favorites-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ],
+            "-recent-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                }
+            ],
+            "-sharedlinks-": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "path",
+                    "type": "location",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
+                    "cssClass": "ellipsis-cell",
+                    "format": "/files",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                },
+                {
+                    "key": "sharedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SHARED_BY",
+                    "sortable": true
+                }
+            ],
+            "default": [
+                {
+                    "key": "$thumbnail",
+                    "type": "image",
+                    "srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
+                    "sortable": false
+                },
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
+                    "cssClass": "full-width ellipsis-cell",
+                    "sortable": true
+                },
+                {
+                    "key": "content.sizeInBytes",
+                    "type": "fileSize",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedAt",
+                    "type": "date",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
+                    "format": "timeAgo",
+                    "sortable": true
+                },
+                {
+                    "key": "modifiedByUser.displayName",
+                    "type": "text",
+                    "title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
+                    "sortable": true
+                }
+            ]
+        }
+    },
+    "adf-task-list": {
+        "supportedPageSizes": [ 5, 10, 15, 20 ],
+        "presets": {
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.NAME",
+                    "sortable": true
+                },
+                {
+                    "key": "noassignee",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "nodueDate",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "nocategory",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "noparentname",
+                    "type": "text",
+                    "title": "ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "nodescription",
+                    "type": "date",
+                    "title": "ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                },
+                {
+                    "key": "noformName",
+                    "type": "date",
+                    "title": "ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT",
+                    "cssClass": "hidden",
+                    "sortable": true
+                }
+            ]
+        }
+    },
+    "adf-process-list": {
+        "presets": {
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.NAME",
+                    "sortable": true
+                },
+                {
+                    "key": "created",
+                    "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.CREATED",
+                    "cssClass": "hidden",
+                    "sortable": true
+                }
+            ]
+        }
+    }
+}

demo-shell/src/app/adf.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+
+import { ContentModule } from '@alfresco/content-services';
+import { ProcessModule } from '@alfresco/process-services';
+import { CoreModule } from '@alfresco/core';
+import { InsightsModule } from '@alfresco/insights';
+
+export function modules() {
+    return [
+        CoreModule,
+        ContentModule,
+        InsightsModule,
+        ProcessModule
+    ];
+}
+
+@NgModule({
+    imports: modules(),
+    exports: modules()
+})
+export class AdfModule {
+}

demo-shell/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

demo-shell/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

demo-shell/src/app/app.component.ts

@@ -0,0 +1,46 @@
+/*!
+ * @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, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SettingsService, PageTitleService, StorageService, TranslationService } from '@alfresco/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AppComponent {
+  searchTerm: string = '';
+
+  constructor(private settingsService: SettingsService,
+              private storage: StorageService,
+              translationService: TranslationService,
+              pageTitleService: PageTitleService,
+              route: ActivatedRoute,
+              router: Router) {
+    this.setProvider();
+    pageTitleService.setTitle();
+  }
+
+  private setProvider() {
+    if (this.storage.hasItem(`providers`)) {
+      this.settingsService.setProviders(this.storage.getItem(`providers`));
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+// import { Editor3DModule } from 'ng2-3d-editor';
+import { ChartsModule } from 'ng2-charts';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+
+import { AppConfigService, TRANSLATION_PROVIDER } from '@alfresco/core';
+import { AppComponent } from './app.component';
+import { AdfModule } from './adf.module';
+import { MaterialModule } from './material.module';
+import { LoginComponent } from './components/login/login.component';
+import { SettingsComponent } from './components/settings/settings.component';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
+import { HomeComponent } from './components/home/home.component';
+import { SearchBarComponent } from './components/search/search-bar.component';
+import { SearchResultComponent } from './components/search/search-result.component';
+import { AboutComponent } from './components/about/about.component';
+import { FormComponent } from './components/form/form.component';
+import { FormListComponent } from './components/form/form-list.component';
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
+
+import { ActivitiComponent } from './components/activiti/activiti.component';
+import { ActivitiTaskAttachmentsComponent } from './components/activiti/activiti-task-attachments.component';
+import { ActivitiProcessAttachmentsComponent } from './components/activiti/activiti-process-attachments.component';
+import { ActivitiShowDiagramComponent } from './components/activiti/activiti-show-diagram.component';
+import { FormViewerComponent } from './components/activiti/form-viewer.component';
+import { FormNodeViewerComponent } from './components/activiti/form-node-viewer.component';
+import { ActivitiAppsViewComponent } from './components/activiti/apps-view.component';
+import { DataTableComponent } from './components/datatable/datatable.component';
+import { FilesComponent } from './components/files/files.component';
+import { FileViewComponent } from './components/file-view/file-view.component';
+import { WebscriptComponent } from './components/webscript/webscript.component';
+import { TagComponent } from './components/tag/tag.component';
+import { SocialComponent } from './components/social/social.component';
+import { VersionManagerDialogAdapterComponent } from './components/files/version-manager-dialog-adapter.component';
+
+import { ThemePickerModule } from './components/theme-picker/theme-picker';
+import { DebugAppConfigService } from './services/debug-app-config.service';
+
+import { routing } from './app.routes';
+import { TranslateModule } from '@ngx-translate/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+@NgModule({
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        BrowserModule,
+        routing,
+        FormsModule,
+        AdfModule,
+        MaterialModule,
+        ThemePickerModule,
+        FlexLayoutModule,
+        //Editor3DModule,
+        ChartsModule,
+        HttpClientModule
+    ],
+    declarations: [
+        AppComponent,
+        LoginComponent,
+        SettingsComponent,
+        AppLayoutComponent,
+        HomeComponent,
+        SearchBarComponent,
+        SearchResultComponent,
+        AboutComponent,
+        ActivitiComponent,
+        ActivitiTaskAttachmentsComponent,
+        ActivitiProcessAttachmentsComponent,
+        ActivitiShowDiagramComponent,
+        FormViewerComponent,
+        FormNodeViewerComponent,
+        ActivitiAppsViewComponent,
+        DataTableComponent,
+        FilesComponent,
+        FileViewComponent,
+        FormComponent,
+        FormListComponent,
+        WebscriptComponent,
+        TagComponent,
+        SocialComponent,
+        CustomSourcesComponent,
+        VersionManagerDialogAdapterComponent
+    ],
+    providers: [
+        TranslateService,
+        { provide: AppConfigService, useClass: DebugAppConfigService },
+        {
+            provide: TRANSLATION_PROVIDER,
+            multi: true,
+            useValue: {
+                name: 'app',
+                source: 'resources'
+            }
+        }
+    ],
+    entryComponents: [
+        VersionManagerDialogAdapterComponent
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

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

@@ -0,0 +1,157 @@
+/*!
+ * @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 { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from '@alfresco/core';
+import { AppLayoutComponent } from './components/app-layout/app-layout.component';
+import { LoginComponent } from './components/login/login.component';
+import { SettingsComponent } from './components/settings/settings.component';
+import { HomeComponent } from './components/home/home.component';
+import { AboutComponent } from './components/about/about.component';
+import { ActivitiComponent } from './components/activiti/activiti.component';
+import { ActivitiShowDiagramComponent } from './components/activiti/activiti-show-diagram.component';
+import { FormViewerComponent } from './components/activiti/form-viewer.component';
+import { FormNodeViewerComponent } from './components/activiti/form-node-viewer.component';
+import { ActivitiAppsViewComponent } from './components/activiti/apps-view.component';
+import { SearchResultComponent } from './components/search/search-result.component';
+
+import { DataTableComponent } from './components/datatable/datatable.component';
+import { WebscriptComponent } from './components/webscript/webscript.component';
+import { TagComponent } from './components/tag/tag.component';
+import { SocialComponent } from './components/social/social.component';
+import { FilesComponent } from './components/files/files.component';
+import { FormComponent } from './components/form/form.component';
+
+import { UploadButtonComponent } from '@alfresco/content-services';
+import { FileViewComponent } from './components/file-view/file-view.component';
+import { CustomSourcesComponent } from './components/files/custom-sources.component';
+import { FormListComponent } from './components/form/form-list.component';
+
+export const appRoutes: Routes = [
+    { path: 'login', component: LoginComponent },
+    { path: 'settings', component: SettingsComponent },
+    { path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
+    {
+        path: '',
+        component: AppLayoutComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {
+                path: '',
+                component: HomeComponent
+            },
+            {
+                path: 'home',
+                component: HomeComponent
+            }
+            ,
+            {
+                path: 'files',
+                component: FilesComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'files/:id',
+                component: FilesComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'dl-custom-sources',
+                component: CustomSourcesComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'datatable',
+                component: DataTableComponent
+            },
+            {
+                path: 'uploader',
+                component: UploadButtonComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'search',
+                component: SearchResultComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'activiti',
+                component: ActivitiAppsViewComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps',
+                component: ActivitiAppsViewComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps/:appId/tasks',
+                component: ActivitiComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps/:appId/processes',
+                component: ActivitiComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'activiti/apps/:appId/diagram/:processDefinitionId',
+                component: ActivitiShowDiagramComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if neeeded
+            {
+                path: 'activiti/appId/:appId',
+                component: ActivitiComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if needed
+            {
+                path: 'activiti/tasks/:id',
+                component: FormViewerComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            // TODO: check if needed
+            {
+                path: 'activiti/tasksnode/:id',
+                component: FormNodeViewerComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'webscript',
+                component: WebscriptComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'tag',
+                component: TagComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            {
+                path: 'social',
+                component: SocialComponent,
+                canActivate: [AuthGuardEcm]
+            },
+            { path: 'about', component: AboutComponent },
+            { path: 'form', component: FormComponent },
+            { path: 'form-list', component: FormListComponent }
+        ]
+    }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

demo-shell/src/app/components/about/about.component.css

@@ -0,0 +1,10 @@
+.about-container {
+    padding: 10px;
+}
+
+.adf-table-version {
+    width: 60%;
+    border: 0;
+    border-spacing: 0;
+    text-align: center;
+}

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

@@ -0,0 +1,49 @@
+<div class="about-container">
+    <h3>Server settings</h3>
+    <mat-list>
+        <small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
+        <mat-list-item>
+            <h4 matLine> Alfresco Process Services URL: {{ bpmHost }}</h4>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item>
+            <h4 matLine>Alfresco Content Services URL: {{ ecmHost }}</h4>
+        </mat-list-item>
+    </mat-list>
+
+    <h3>Product Versions</h3>
+    <div *ngIf="bpmVersion">
+        <h3>BPM</h3>
+        <label> Edition </label> {{ bpmVersion.edition }}
+        <p></p>
+        <label> Version </label> {{ bpmVersion.majorVersion }}.{{ bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
+    </div>
+    <div *ngIf="ecmVersion">
+        <h3>ECM</h3>
+        <label> Edition </label> {{ ecmVersion.edition }}
+        <p></p>
+        <label> Version </label> {{ ecmVersion.version.display }}
+        <p></p>
+        <h4>License</h4>
+        <adf-datatable [data]="license"></adf-datatable>
+
+        <h4> Status</h4>
+        <adf-datatable [data]="status"></adf-datatable>
+
+        <h4>Modules</h4>
+
+        <adf-datatable [data]="modules"></adf-datatable>
+    </div>
+
+    <div *ngIf="githubUrlCommitAlpha">
+        <h3>Source code</h3>
+        <small>You are running the project based on the following commit:</small>
+        <div>
+            <a [href]="githubUrlCommitAlpha">{{githubUrlCommitAlpha}}</a>
+        </div>
+    </div>
+
+    <h3>Packages</h3>
+    <small>Current project is using the following ADF libraries:</small>
+    <adf-datatable [data]="data"></adf-datatable>
+</div>

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

@@ -0,0 +1,138 @@
+/*!
+ * @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, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import {
+    AuthenticationService,
+    AppConfigService,
+    BpmProductVersionModel,
+    DiscoveryApiService,
+    EcmProductVersionModel,
+    ObjectDataTableAdapter
+} from '@alfresco/core';
+
+@Component({
+    selector: 'adf-about-page',
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+    data: ObjectDataTableAdapter;
+    status: ObjectDataTableAdapter;
+    license: ObjectDataTableAdapter;
+    modules: ObjectDataTableAdapter;
+    githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
+
+    configFile: string = 'app.config.json';
+    ecmHost: string = '';
+    bpmHost: string = '';
+
+    ecmVersion: EcmProductVersionModel = null;
+    bpmVersion: BpmProductVersionModel = null;
+
+    constructor(private http: Http,
+                private appConfig: AppConfigService,
+                private authService: AuthenticationService,
+                private discovery: DiscoveryApiService) {
+    }
+
+    ngOnInit() {
+
+        if (this.authService.isEcmLoggedIn()) {
+            this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
+                this.ecmVersion = ecmVers;
+
+                this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
+                    {type: 'text', key: 'id', title: 'ID', sortable: true},
+                    {type: 'text', key: 'title', title: 'Title', sortable: true},
+                    {type: 'text', key: 'version', title: 'Description', sortable: true},
+                    {type: 'text', key: 'installDate', title: 'Install Date', sortable: true},
+                    {type: 'text', key: 'installState', title: 'Install State', sortable: true},
+                    {type: 'text', key: 'versionMin', title: 'Version Minor', sortable: true},
+                    {type: 'text', key: 'versionMax', title: 'Version Max', sortable: true}
+                ]);
+
+                this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
+                    {type: 'text', key: 'isReadOnly', title: 'ReadOnly', sortable: true},
+                    {type: 'text', key: 'isAuditEnabled', title: 'Is Audit Enable', sortable: true},
+                    {type: 'text', key: 'isQuickShareEnabled', title: 'Is quick shared enable', sortable: true},
+                    {type: 'text', key: 'isThumbnailGenerationEnabled', title: 'Thumbnail Generation', sortable: true}
+                ]);
+
+                this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
+                    {type: 'text', key: 'issuedAt', title: 'Issued At', sortable: true},
+                    {type: 'text', key: 'expiresAt', title: 'Expires At', sortable: true},
+                    {type: 'text', key: 'remainingDays', title: 'Remaining Days', sortable: true},
+                    {type: 'text', key: 'holder', title: 'Holder', sortable: true},
+                    {type: 'text', key: 'mode', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'isClusterEnabled', title: 'Is Cluster Enabled', sortable: true},
+                    {type: 'text', key: 'isCryptodocEnabled', title: 'Is Cryptodoc Enable', sortable: true}
+                ]);
+            });
+        }
+
+        if (this.authService.isBpmLoggedIn()) {
+            this.discovery.getBpmProductInfo().subscribe((bpmVers) => {
+                this.bpmVersion = bpmVers;
+            });
+        }
+
+        this.http.get('/versions.json').subscribe(response => {
+            let regexp = new RegExp('^(@alfresco)');
+
+            let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
+                return regexp.test(val);
+            });
+
+            let alfrescoPackagesTableRepresentation = [];
+            alfrescoPackages.forEach((val) => {
+                alfrescoPackagesTableRepresentation.push({
+                    name: val,
+                    version: response.json().dependencies[val].version
+                });
+            });
+
+            this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
+
+            this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
+                {type: 'text', key: 'name', title: 'Name', sortable: true},
+                {type: 'text', key: 'version', title: 'Version', sortable: true}
+            ]);
+
+        });
+
+        this.ecmHost = this.appConfig.get<string>('ecmHost');
+        this.bpmHost = this.appConfig.get<string>('bpmHost');
+    }
+
+    private gitHubLinkCreation(alfrescoPackagesTableRepresentation): void {
+        let corePackage = alfrescoPackagesTableRepresentation.find((packageUp) => {
+            return packageUp.name === '@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/src/app/components/activiti/activiti-process-attachments.component.css

@@ -0,0 +1,3 @@
+adf-create-process-attachment ::ng-deep button {
+    float: right;
+}

demo-shell/src/app/components/activiti/activiti-process-attachments.component.html

@@ -0,0 +1,32 @@
+<div id="attachment-process-list" *ngIf="processId">
+    <h5>Attachments</h5>
+    <div class="adf-no-form-container">
+        <adf-upload-drag-area
+            [parentId]="processId"
+            [disabled]="isCompletedProcess()"
+            [showNotificationBar]="false">
+            <adf-process-attachment-list #processAttachList
+                *ngIf="processId"
+                [disabled]="isCompletedProcess()"
+                [processInstanceId]="processId"
+                (attachmentClick)="onAttachmentClick($event)">
+            </adf-process-attachment-list>
+        </adf-upload-drag-area>
+
+        <adf-create-process-attachment
+            *ngIf="!isCompletedProcess()"
+            [processInstanceId]="processId"
+            (success)="onFileUploadComplete($event)">
+        </adf-create-process-attachment>
+
+    </div>
+</div>
+
+<div *ngIf="fileShowed">
+    <adf-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </adf-viewer>
+</div>

demo-shell/src/app/components/activiti/activiti-process-attachments.component.ts

@@ -0,0 +1,74 @@
+/*!
+ * @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, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ProcessInstance, ProcessService ,
+    ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/process-services';
+import { UploadService } from '@alfresco/core';
+
+@Component({
+    selector: 'activiti-process-attachments',
+    templateUrl: './activiti-process-attachments.component.html',
+    styleUrls: ['./activiti-process-attachments.component.css'],
+    providers: [
+        {provide: UploadService, useClass: ProcessUploadService}
+    ]
+})
+
+export class ActivitiProcessAttachmentsComponent implements OnInit, OnChanges {
+
+    @Input()
+    processId: string;
+
+    @ViewChild(ProcessAttachmentListComponent)
+    processAttachList: ProcessAttachmentListComponent;
+
+    fileShowed: boolean = false;
+    content: Blob;
+    contentName: string;
+    processInstance: ProcessInstance;
+
+    constructor(private uploadService: UploadService, private processService: ProcessService) {
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+    }
+
+    ngOnChanges() {
+        if (this.processId) {
+            this.processService.getProcess(this.processId).subscribe((processInstance: ProcessInstance) => {
+                this.processInstance = processInstance;
+            });
+        }
+    }
+
+    onFileUploadComplete(content: any) {
+        this.processAttachList.add(content);
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    isCompletedProcess(): boolean {
+        return this.processInstance && this.processInstance.ended !== undefined && this.processInstance.ended !== null;
+    }
+
+}

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

@@ -0,0 +1,4 @@
+<div>
+    <button mat-mini-fab  (click)="onClickBack()" ><mat-icon>keyboard_backspace</mat-icon></button>
+    <adf-diagram [processInstanceId]="processDefinitionId"></adf-diagram>
+</div>

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

@@ -0,0 +1,43 @@
+/*!
+ * @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 { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    selector: 'activiti-show-diagram',
+    templateUrl: './activiti-show-diagram.component.html',
+    styleUrls: ['./activiti-show-diagram.component.css']
+})
+export class ActivitiShowDiagramComponent {
+
+    processDefinitionId: string;
+    appId: string;
+
+    constructor(private route: ActivatedRoute,
+                private router: Router) {
+        this.route.params.subscribe(params => {
+            this.processDefinitionId = params['processDefinitionId'];
+            this.appId = params['appId'];
+        });
+    }
+
+    onClickBack() {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/processes']);
+    }
+
+}

demo-shell/src/app/components/activiti/activiti-task-attachments.component.css

@@ -0,0 +1,3 @@
+adf-create-task-attachment ::ng-deep button {
+    float: right;
+}

demo-shell/src/app/components/activiti/activiti-task-attachments.component.html

@@ -0,0 +1,32 @@
+<div id="attachment-task-list" *ngIf="taskId">
+    <h5>Attachments</h5>
+    <div class="adf-no-form-container">
+        <adf-upload-drag-area
+            [parentId]="taskId"
+            [disabled]="isCompletedTask()"
+            [showNotificationBar]="false">
+            <adf-task-attachment-list #taskAttachList
+                *ngIf="taskId"
+                [taskId]="taskId"
+                [disabled]="isCompletedTask()"
+                (attachmentClick)="onAttachmentClick($event)">
+            </adf-task-attachment-list>
+        </adf-upload-drag-area>
+
+        <adf-create-task-attachment
+            *ngIf="!isCompletedTask()"
+            [taskId]="taskId"
+            (success)="onFileUploadComplete($event)">
+        </adf-create-task-attachment>
+
+    </div>
+</div>
+
+<div *ngIf="fileShowed">
+    <adf-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </adf-viewer>
+</div>

demo-shell/src/app/components/activiti/activiti-task-attachments.component.ts

@@ -0,0 +1,76 @@
+/*!
+ * @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, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ProcessUploadService, TaskListService, TaskAttachmentListComponent } from '@alfresco/process-services';
+import { UploadService } from '@alfresco/core';
+
+@Component({
+    selector: 'activiti-task-attachments',
+    templateUrl: './activiti-task-attachments.component.html',
+    styleUrls: ['./activiti-task-attachments.component.css'],
+    providers: [
+        { provide: UploadService, useClass: ProcessUploadService }
+    ]
+})
+
+export class ActivitiTaskAttachmentsComponent implements OnInit, OnChanges {
+
+    @Input()
+    taskId: string;
+
+    @ViewChild(TaskAttachmentListComponent)
+    taskAttachList: TaskAttachmentListComponent;
+
+    fileShowed: boolean = false;
+    content: Blob;
+    contentName: string;
+
+    taskDetails: any;
+
+    constructor(private uploadService: UploadService,
+                private activitiTaskList: TaskListService) {
+
+    }
+
+    ngOnInit() {
+        this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
+    }
+
+    ngOnChanges() {
+        if (this.taskId) {
+            this.activitiTaskList.getTaskDetails(this.taskId).map((res) => res).subscribe(
+                (res: any) => {
+                    this.taskDetails = res;
+                });
+        }
+    }
+
+    onFileUploadComplete(content: any) {
+        this.taskAttachList.add(content);
+    }
+
+    onAttachmentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    isCompletedTask(): boolean {
+        return this.taskDetails && this.taskDetails.endDate !== undefined && this.taskDetails.endDate !== null;
+    }
+}

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

@@ -0,0 +1,232 @@
+<mat-tab-group [(selectedIndex)]="activeTab">
+    <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+        <div class="page-content">
+            <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="activiti-grid-item activiti-tasks-menu" fxFlex.gt-md="225px">
+                    <div class="activiti-list-buttons">
+                        <button color="primary" mat-raised-button data-automation-id="btn-start-task" class="activiti-list-buttons-start" (click)="navigateStartTask()">
+                            <mat-icon>add</mat-icon>
+                            <span>{{'PS-TAB.START-TASK' | translate}}</span>
+                        </button>
+                    </div>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assignment'">
+                            <adf-filters
+                                [filterParam]="{name:'MY tasks'}"
+                                [appId]="appId"
+                                [hasIcon]="false"
+                                (filterClick)="onTaskFilterClick($event)"
+                                (success)="onSuccessTaskFilterList($event)"
+                                #activitifilter>
+                            </adf-filters>
+                        </adf-accordion-group>
+                    </adf-accordion>
+                </div>
+                <div class="activiti-grid-item activiti-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                     *ngIf="taskFilter && !isStartTaskMode()">
+                    <adf-tasklist
+                        [appId]="taskFilter?.appId"
+                        [presetColumn]="presetColoum"
+                        [page]="taskPage"
+                        [size]="taskPagination.maxItems"
+                        [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
+                        [name]="taskFilter?.filter?.name"
+                        [assignment]="taskFilter?.filter?.assignment"
+                        [state]="taskFilter?.filter?.state"
+                        [sort]="taskFilter?.filter?.sort"
+                        [data]="dataTasks"
+                        [landingTaskId]="currentTaskId"
+                        (rowClick)="onTaskRowClick($event)"
+                        (success)="onSuccessTaskList($event)"
+                        (row-click)="onRowClick($event)"
+                        (row-dblclick)="onTaskRowDblClick($event)"
+                        #activititasklist>
+                        <!-- Custom column definition demo -->
+
+                        <!-- <data-columns>
+                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="full-width name-column"></data-column>
+                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="hidden"></data-column>
+                        </data-columns> -->
+
+                    </adf-tasklist>
+
+                    <adf-pagination
+                        (changePageNumber)="onChangePageNumber($event)"
+                        (changePageSize)="onChangePageSize($event)"
+                        (nextPage)="onNextPage($event)"
+                        (prevPage)="onPrevPage($event)"
+                        [pagination]="taskPagination"
+                        [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
+                    </adf-pagination>
+                </div>
+                <div class="activiti-grid-item activiti-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                    <adf-task-details #activitidetails
+                                           [debugMode]="true"
+                                           [taskId]="currentTaskId"
+                                           [fieldValidators]="fieldValidators"
+                                           (formCompleted)="onFormCompleted($event)"
+                                           (formContentClicked)="onFormContentClick($event)"
+                                           (taskCreated)="onTaskCreated($event)"
+                                           (assignTask)="onAssignTask()"
+                                           (taskDeleted)="onTaskDeleted($event)">
+                    </adf-task-details>
+                    <hr>
+                    <div *ngIf="currentTaskId">
+                        {{'PS-TAB.AUDIT-LOG' | translate}}
+                        <button
+                            adf-task-audit
+                            [task-id]="currentTaskId"
+                            [download]="true"
+                            mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
+                            <mat-icon>assignment_ind</mat-icon>
+                        </button>
+                        <hr>
+                    </div>
+                    <mat-card>
+                        <mat-card-content>
+                            <adf-task-attachment-list
+                                [taskId]="currentTaskId">
+                            </adf-task-attachment-list>
+                        </mat-card-content>
+                    </mat-card>
+                </div>
+                <div class="activiti-grid-item activiti-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                    <adf-start-task
+                        [appId]="appId"
+                        (success)="onStartTaskSuccess($event)"
+                        (cancel)="onCancelStartTask()">
+                    </adf-start-task>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+    <mat-tab id="processes-header" href="#processes"
+            label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
+        <div class="page-content">
+            <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="activiti-grid-item activiti-processes-menu" fxFlex.gt-md="225px">
+                    <div class="activiti-list-buttons">
+                        <button
+                            color="primary"
+                            mat-raised-button
+                            class="activiti-list-buttons-start"
+                            data-automation-id="btn-start-process"
+                            (click)="navigateStartProcess()">
+                            <mat-icon>add</mat-icon>
+                            <span>{{'PS-TAB.START-PROCESS' | translate}}</span>
+                        </button>
+                    </div>
+                    <adf-accordion>
+                        <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
+                                             [headingIcon]="'assessment'">
+                            <adf-process-instance-filters
+                                [filterParam]="{index: 0}"
+                                [appId]="appId"
+                                (filterClick)="onProcessFilterClick($event)"
+                                (success)="onSuccessProcessFilterList($event)">
+                            </adf-process-instance-filters>
+                        </adf-accordion-group>
+                    </adf-accordion>
+                </div>
+                <div class="activiti-grid-item activiti-processes-list activiti-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
+                     *ngIf="processFilter && !isStartProcessMode()">
+                    <adf-process-instance-list
+                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                        [name]="processFilter.filter.name"
+                        [presetColumn]="presetColoum"
+                        [state]="processFilter.filter.state"
+                        [sort]="processFilter.filter.sort"
+                        [data]="dataProcesses"
+                        (rowClick)="onProcessRowClick($event)"
+                        (row-dblclick)="onProcessRowDblClick($event)"
+                        (success)="onSuccessProcessList($event)">
+                        <!-- Custom column definition demo -->
+
+                        <!-- <data-columns>
+                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
+                        </data-columns> -->
+                        
+                    </adf-process-instance-list>
+                </div>
+                <div class="activiti-grid-item activiti-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                    <adf-process-instance-details
+                        [processInstanceId]="currentProcessInstanceId"
+                        (processCancelled)="processCancelled()"
+                        (showProcessDiagram)="onShowProcessDiagram($event)"
+                        (taskClick)="onProcessDetailsTaskClick($event)">
+                    </adf-process-instance-details>
+                    <hr>
+                    <div *ngIf="currentProcessInstanceId">
+                        {{'PS-TAB.AUDIT-LOG' | translate}}
+                        <button adf-process-audit
+                                [process-id]="currentProcessInstanceId"
+                                [download]="true" mat-icon-button
+                                [format]="'pdf'"
+                                (clicked)="onAuditClick($event)"
+                                (error)="onAuditError($event)">
+                            <mat-icon>assignment_ind</mat-icon>
+                        </button>
+                        <hr>
+                    </div>
+                    <mat-card>
+
+                        <mat-card-content>
+                            <adf-process-attachment-list
+                                [processInstanceId]="currentProcessInstanceId">
+                            </adf-process-attachment-list>
+                        </mat-card-content>
+                    </mat-card>
+                </div>
+                <div class="activiti-grid-item activiti-processes-start" fxFlex.gt-md="1 1 auto"
+                     *ngIf="isStartProcessMode()">
+                    <adf-start-process
+                        [appId]="appId"
+                        (start)="onStartProcessInstance($event)"
+                        (cancel)="onCancelProcessInstance()">
+                    </adf-start-process>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+    <mat-tab id="report-header" href="#report"
+            label="{{'PS-TAB.REPORTS-TAB' | translate}}">
+        <div class="activiti-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="activiti-grid-item activiti-reports-menu" fxFlex.gt-md="300px">
+                <span><h5>Report List</h5></span>
+                <hr>
+                <analytics-report-list
+                    [appId]="appId"
+                    [selectFirst]="selectFirstReport"
+                    (reportClick)="onReportClick($event)"
+                    #analyticsreportlist>
+                </analytics-report-list>
+            </div>
+            <div class="activiti-grid-item activiti-reports-details" fxFlex.gt-md="1 1 auto">
+                <adf-analytics
+                    *ngIf="report"
+                    [appId]="appId"
+                    [reportId]="report.id"
+                    [hideParameters]="false"
+                    (editReport)="onEditReport($event)"
+                    (reportSaved)="onReportSaved($event)"
+                    (reportDeleted)="onReportDeleted()">
+                </adf-analytics>
+                <div *ngIf="!report">
+                    <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+</mat-tab-group>
+
+<div *ngIf="fileShowed">
+    <adf-viewer
+        [(showViewer)]="fileShowed"
+        [blobFile]="content"
+        [displayName]="contentName"
+        [overlayMode]="true">
+    </adf-viewer>
+</div>

demo-shell/src/app/components/activiti/activiti.component.scss

@@ -0,0 +1,106 @@
+
+.adf-no-form-container {
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.activiti-grid {
+
+    .activiti-grid-item {
+        margin: 4px;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+        padding: 10px;
+    }
+
+    .activiti-list-buttons {
+        margin-bottom: 24px;
+    }
+
+    .activiti-list-buttons-start {
+        width: 100%;
+    }
+
+    .activiti-tasks-list.small-pagination,
+    .activiti-processes-list.small-pagination {
+        .adf-pagination {
+
+            flex-wrap: wrap;
+            padding-bottom: 24px;
+            padding-top: 8px;
+
+            &__block {
+                border-right: none;
+            }
+
+            &__range-block.adf-pagination__block:first-child {
+                order: 1;
+                width: 60%;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
+            }
+
+            &__perpage-block {
+                order: 3;
+                width: 60%;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
+            }
+
+            &__actualinfo-block {
+                order: 2;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
+
+            &__controls-block {
+                order: 4;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    .activiti-list {
+        .adf-data-table {
+            border: none;
+        }
+
+        .adf-data-table tr,
+        .adf-data-table td {
+            height: 36px;
+            font-size: 14px;
+        }
+
+        .adf-data-table td {
+            padding-top: 0;
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+
+        .adf-data-table th {
+            padding-top: 0;
+            padding-bottom: 0;
+            height: 40px;
+            vertical-align: middle;
+            font-size: 14px;
+        }
+    }
+
+    @media screen and (max-width: 1279px) {
+        container-widget .grid-list {
+            flex-direction: column;
+
+            .grid-list-item {
+                width: 100% !important;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,483 @@
+/*!
+ * @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.
+ */
+
+// tslint:disable-next-line:adf-file-name
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    Input,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Pagination, ProcessInstanceFilterRepresentation } from 'alfresco-js-api';
+import {
+    FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
+    DynamicTableRow, ValidateDynamicTableRowEvent
+} from '@alfresco/core';
+
+import { AnalyticsReportListComponent } from '@alfresco/insights';
+
+import {
+    ProcessFiltersComponent,
+    ProcessInstance,
+    ProcessInstanceDetailsComponent,
+    ProcessInstanceListComponent,
+    StartProcessInstanceComponent
+} from '@alfresco/process-services';
+import {
+    AppsListComponent,
+    FilterRepresentationModel,
+    TaskDetailsComponent,
+    TaskDetailsEvent,
+    TaskFiltersComponent,
+    TaskListComponent,
+    TaskListService
+} from '@alfresco/process-services';
+import { LogService } from '@alfresco/core';
+import { AlfrescoApiService } from '@alfresco/core';
+import {
+    DataSorting,
+    ObjectDataRow,
+    ObjectDataTableAdapter
+} from '@alfresco/core';
+import { Subscription } from 'rxjs/Rx';
+import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
+import { DemoFieldValidator } from './demo-field-validator';
+
+const currentProcessIdNew = '__NEW__';
+const currentTaskIdNew = '__NEW__';
+
+@Component({
+    selector: 'adf-activiti',
+    templateUrl: './activiti.component.html',
+    styleUrls: ['./activiti.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit {
+
+    @ViewChild(TaskFiltersComponent)
+    activitifilter: TaskFiltersComponent;
+
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
+
+    @ViewChild(ProcessFiltersComponent)
+    activitiprocessfilter: ProcessFiltersComponent;
+
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
+
+    @ViewChild(ProcessInstanceDetailsComponent)
+    activitiprocessdetails: ProcessInstanceDetailsComponent;
+
+    @ViewChild(TaskDetailsComponent)
+    activitidetails: TaskDetailsComponent;
+
+    @ViewChild(StartProcessInstanceComponent)
+    activitiStartProcess: StartProcessInstanceComponent;
+
+    @ViewChild(AnalyticsReportListComponent)
+    analyticsreportlist: AnalyticsReportListComponent;
+
+    @Input()
+    appId: number = null;
+
+    fileShowed: boolean = false;
+    selectFirstReport: boolean = false;
+
+    private tabs = { tasks: 0, processes: 1, reports: 2 };
+
+    content: Blob;
+    contentName: string;
+
+    layoutType: string;
+    currentTaskId: string;
+    currentProcessInstanceId: string;
+
+    taskSchemaColumns: any[] = [];
+    taskPagination: Pagination = {
+        skipCount: 0,
+        maxItems: 10,
+        totalItems: 0
+    };
+    taskPage: number = 0;
+    processSchemaColumns: any[] = [];
+
+    activeTab: number = this.tabs.tasks; // tasks|processes|reports
+
+    taskFilter: FilterRepresentationModel;
+    report: any;
+    processFilter: ProcessInstanceFilterRepresentation;
+
+    sub: Subscription;
+    blobFile: any;
+    flag: boolean = true;
+
+    dataTasks: ObjectDataTableAdapter;
+    dataProcesses: ObjectDataTableAdapter;
+    presetColoum: string = 'default';
+
+    fieldValidators = [
+        ...FORM_FIELD_VALIDATORS,
+        new DemoFieldValidator()
+    ];
+
+    constructor(private elementRef: ElementRef,
+                private route: ActivatedRoute,
+                private router: Router,
+                private taskListService: TaskListService,
+                private apiService: AlfrescoApiService,
+                private logService: LogService,
+                formRenderingService: FormRenderingService,
+                formService: FormService) {
+        this.dataTasks = new ObjectDataTableAdapter();
+        this.dataTasks.setSorting(new DataSorting('created', 'desc'));
+
+        // Uncomment this line to replace all 'text' field editors with custom component
+        // formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
+
+        // Uncomment this line to map 'custom_stencil_01' to local editor component
+        formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
+
+        formService.formLoaded.subscribe((e: FormEvent) => {
+            this.logService.log(`Form loaded: ${e.form.id}`);
+        });
+
+        formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => {
+            this.logService.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
+        });
+
+        formService.validateDynamicTableRow.subscribe(
+            (e: ValidateDynamicTableRowEvent) => {
+                const row: DynamicTableRow = e.row;
+                if (row && row.value && row.value.name === 'admin') {
+                    e.summary.isValid = false;
+                    e.summary.text = 'Sorry, wrong value. You cannot use "admin".';
+                    e.preventDefault();
+                }
+            }
+        );
+
+        // Uncomment this block to see form event handling in action
+        /*
+        formService.formEvents.subscribe((event: Event) => {
+            this.logService.log('Event fired:' + event.type);
+            this.logService.log('Event Target:' + event.target);
+        });
+        */
+    }
+
+    onPrevPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage--;
+    }
+
+    onNextPage(pagination: Pagination): void {
+        this.taskPagination.skipCount = pagination.skipCount;
+        this.taskPage++;
+    }
+
+    onChangePageSize(pagination: Pagination): void {
+        const { skipCount, maxItems } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    onChangePageNumber(pagination: Pagination): void {
+        const { maxItems, skipCount } = pagination;
+        this.taskPage = this.currentPage(skipCount, maxItems);
+        this.taskPagination.maxItems = maxItems;
+        this.taskPagination.skipCount = skipCount;
+    }
+
+    currentPage(skipCount: number, maxItems: number): number {
+        return (skipCount && maxItems) ? Math.floor(skipCount / maxItems) : 0;
+    }
+
+    ngOnInit() {
+        this.taskListService.tasksList$.subscribe(
+            (tasks) => {
+                this.taskPagination = {
+                    count: tasks.data.length,
+                    maxItems: this.taskPagination.maxItems,
+                    skipCount: this.taskPagination.skipCount,
+                    totalItems: tasks.total
+                };
+                this.logService.log({
+                    count: tasks.data.length,
+                    maxItems: this.taskPagination.maxItems,
+                    skipCount: this.taskPagination.skipCount,
+                    totalItems: tasks.total
+                });
+            }, (err) => {
+                this.logService.log('err' + err);
+            });
+
+        if (this.router.url.includes('processes')) {
+            this.activeTab = this.tabs.processes;
+        }
+        this.sub = this.route.params.subscribe(params => {
+            let applicationId = params['appId'];
+            if (applicationId && applicationId !== '0') {
+                this.appId = params['appId'];
+            }
+
+            this.taskFilter = null;
+            this.currentTaskId = null;
+            this.processFilter = null;
+            this.currentProcessInstanceId = null;
+        });
+        this.layoutType = AppsListComponent.LAYOUT_GRID;
+
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+        this.taskListService.tasksList$.subscribe();
+    }
+
+    onTaskFilterClick(filter: FilterRepresentationModel): void {
+        this.applyTaskFilter(filter);
+    }
+
+    onReportClick(event: any): void {
+        this.report = event;
+    }
+
+    onSuccessTaskFilterList(event: any): void {
+        this.applyTaskFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    applyTaskFilter(filter: FilterRepresentationModel) {
+        this.taskFilter = filter;
+        if (filter && this.taskList) {
+            this.taskList.hasCustomDataSource = false;
+        }
+    }
+
+    onStartTaskSuccess(event: any): void {
+        this.activitifilter.selectFilterWithTask(event.id);
+        this.currentTaskId = event.id;
+    }
+
+    onCancelStartTask() {
+        this.currentTaskId = null;
+        this.reloadTaskFilters();
+    }
+
+    onSuccessTaskList(event: FilterRepresentationModel) {
+        this.currentTaskId = this.taskList.getCurrentId();
+    }
+
+    onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
+        this.currentProcessInstanceId = null;
+        this.processFilter = event;
+    }
+
+    onSuccessProcessFilterList(event: ProcessInstanceFilterRepresentation[]): void {
+        this.processFilter = this.activitiprocessfilter.getCurrentFilter();
+    }
+
+    onSuccessProcessList(event: any): void {
+        this.currentProcessInstanceId = this.processList.getCurrentId();
+    }
+
+    onTaskRowClick(taskId): void {
+        this.currentTaskId = taskId;
+    }
+
+    onTaskRowDblClick(event: CustomEvent) {
+        const taskId = event.detail.value.obj.id;
+        this.currentTaskId = taskId;
+    }
+
+    onProcessRowDblClick(event: CustomEvent) {
+        const processInstanceId = event.detail.value.obj.id;
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onProcessRowClick(processInstanceId): void {
+        this.currentProcessInstanceId = processInstanceId;
+    }
+
+    onEditReport(name: string): void {
+        this.analyticsreportlist.reload();
+    }
+
+    onReportSaved(reportId): void {
+        this.analyticsreportlist.reload(reportId);
+    }
+
+    onReportDeleted(): void {
+        this.analyticsreportlist.reload();
+        this.analyticsreportlist.selectReport(null);
+    }
+
+    navigateStartProcess(): void {
+        this.resetProcessFilters();
+        this.reloadProcessFilters();
+        this.currentProcessInstanceId = currentProcessIdNew;
+    }
+
+    navigateStartTask(): void {
+        this.resetTaskFilters();
+        this.reloadTaskFilters();
+        this.currentTaskId = currentTaskIdNew;
+    }
+
+    onStartProcessInstance(instance: ProcessInstance): void {
+        this.currentProcessInstanceId = instance.id;
+        this.activitiStartProcess.reset();
+        this.activitiprocessfilter.selectRunningFilter();
+    }
+
+    onCancelProcessInstance() {
+        this.currentProcessInstanceId = null;
+        this.reloadProcessFilters();
+    }
+
+    isStartProcessMode(): boolean {
+        return this.currentProcessInstanceId === currentProcessIdNew;
+    }
+
+    isStartTaskMode(): boolean {
+        return this.currentTaskId === currentTaskIdNew;
+    }
+
+    processCancelled(data: any): void {
+        this.currentProcessInstanceId = null;
+        this.processList.reload();
+    }
+
+    onSuccessNewProcess(data: any): void {
+        this.processList.reload();
+    }
+
+    onFormCompleted(form): void {
+        this.currentTaskId = null;
+        this.taskPagination.totalItems--;
+        const { skipCount, maxItems, totalItems } = this.taskPagination;
+        if (totalItems > 0 && (skipCount >= totalItems)) {
+            this.taskPagination.skipCount -= maxItems;
+        }
+        this.taskPage = this.currentPage(this.taskPagination.skipCount, maxItems);
+        if (this.taskList) {
+            this.taskList.reload();
+        }
+        if (this.processList) {
+            this.processList.reload();
+        }
+    }
+
+    onFormContentClick(content: any): void {
+        this.fileShowed = true;
+        this.content = content.contentBlob;
+        this.contentName = content.name;
+    }
+
+    onAuditClick(event: any) {
+        this.logService.log(event);
+    }
+
+    onAuditError(event: any): void {
+        this.logService.error('My custom error message' + event);
+    }
+
+    onTaskCreated(data: any): void {
+        this.currentTaskId = data.parentTaskId;
+        this.taskList.reload();
+    }
+
+    onTaskDeleted(data: any): void {
+        this.taskList.reload();
+    }
+
+    ngAfterViewInit() {
+        this.loadStencilScriptsInPageFromActiviti();
+    }
+
+    loadStencilScriptsInPageFromActiviti() {
+        this.apiService.getInstance().activiti.scriptFileApi.getControllers().then(response => {
+            if (response) {
+                let s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.text = response;
+                this.elementRef.nativeElement.appendChild(s);
+            }
+        });
+    }
+
+    onShowProcessDiagram(event: any): void {
+        this.router.navigate(['/activiti/apps/' + this.appId + '/diagram/' + event.value]);
+    }
+
+    onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
+        event.preventDefault();
+        this.activeTab = this.tabs.tasks;
+
+        const taskId = event.value.id;
+        const processTaskDataRow = new ObjectDataRow({
+            id: taskId,
+            name: event.value.name || 'No name',
+            created: event.value.created
+        });
+        this.activitifilter.selectFilter(null);
+        if (this.taskList) {
+            this.taskList.setCustomDataSource([processTaskDataRow]);
+            this.taskList.selectTask(taskId);
+        }
+        this.currentTaskId = taskId;
+    }
+
+    private resetProcessFilters(): void {
+        this.processFilter = null;
+    }
+
+    private resetTaskFilters(): void {
+        this.taskFilter = null;
+    }
+
+    private reloadProcessFilters(): void {
+        this.activitiprocessfilter.selectFilter(this.activitiprocessfilter.getCurrentFilter());
+    }
+
+    private reloadTaskFilters(): void {
+        this.activitifilter.selectFilter(this.activitifilter.getCurrentFilter());
+    }
+
+    onRowClick(event): void {
+        this.logService.log(event);
+    }
+
+    onRowDblClick(event): void {
+        this.logService.log(event);
+    }
+
+    isTaskCompleted(): boolean {
+        return this.activitidetails.isCompletedTask();
+    }
+
+    onAssignTask() {
+        this.taskList.reload();
+        this.currentTaskId = null;
+    }
+}

demo-shell/src/app/components/activiti/apps-view.component.html

@@ -0,0 +1 @@
+<adf-apps (appClick)="onAppClicked($event)"></adf-apps>

demo-shell/src/app/components/activiti/apps-view.component.ts

@@ -0,0 +1,35 @@
+/*!
+ * @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 { Router } from '@angular/router';
+import { AppDefinitionRepresentationModel } from '@alfresco/process-services';
+
+@Component({
+    selector: 'activiti-apps-view',
+    templateUrl: './apps-view.component.html'
+})
+export class ActivitiAppsViewComponent {
+
+    constructor(private router: Router) {
+    }
+
+     onAppClicked(app: AppDefinitionRepresentationModel) {
+         this.router.navigate(['/activiti/apps', app.id || 0, 'tasks']);
+     }
+
+}

demo-shell/src/app/components/activiti/custom-editor/custom-editor.component.ts

@@ -0,0 +1,54 @@
+/*!
+ * @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.
+ */
+
+/* tslint:disable */
+
+import { Component, NgModule } from '@angular/core';
+import { WidgetComponent } from '@alfresco/core';
+
+@Component({
+    selector: 'custom-editor',
+    template: `
+        <div style="color: red">Look, I'm a custom editor!</div>
+    `
+})
+export class CustomEditorComponent extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}
+
+@Component({
+    selector: 'custom-stencil-01',
+    template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
+})
+export class CustomStencil01 extends WidgetComponent {
+
+    constructor() {
+        super();
+    }
+}
+
+@NgModule({
+    declarations: [ CustomEditorComponent, CustomStencil01 ],
+    exports: [ CustomEditorComponent, CustomStencil01 ],
+    entryComponents: [ CustomEditorComponent, CustomStencil01 ]
+})
+export class CustomEditorsModule {
+
+}

demo-shell/src/app/components/activiti/demo-field-validator.ts

@@ -0,0 +1,36 @@
+/*!
+ * @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 { FormFieldModel, FormFieldTypes, FormFieldValidator } from '@alfresco/core';
+
+export class DemoFieldValidator implements FormFieldValidator {
+
+    isSupported(field: FormFieldModel): boolean {
+        return field && field.type === FormFieldTypes.TEXT;
+    }
+
+    validate(field: FormFieldModel): boolean {
+        if (this.isSupported(field)) {
+            if (field.value && field.value.toLowerCase() === 'admin') {
+                field.validationSummary.message = 'Sorry, the value cannot be "admin".';
+                return false;
+            }
+        }
+        return true;
+    }
+
+}

demo-shell/src/app/components/activiti/form-node-viewer.component.css

@@ -0,0 +1,3 @@
+.activiti-form-viewer {
+    margin: 10px;
+}

demo-shell/src/app/components/activiti/form-node-viewer.component.html

@@ -0,0 +1,6 @@
+<div class="activiti-form-viewer" *ngIf="nodeId">
+    <adf-form [nodeId]="nodeId"
+                   [saveMetadata]="true"
+                   [path]="'/Sites/swsdp/documentLibrary'">
+    </adf-form>
+</div>

demo-shell/src/app/components/activiti/form-node-viewer.component.ts

@@ -0,0 +1,46 @@
+/*!
+ * @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, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+@Component({
+    selector: 'form-node-viewer',
+    templateUrl: './form-node-viewer.component.html',
+    styleUrls: ['./form-node-viewer.component.css']
+})
+export class FormNodeViewerComponent implements OnInit, OnDestroy {
+
+    nodeId: string;
+
+    private sub: Subscription;
+
+    constructor(private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.nodeId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+}

demo-shell/src/app/components/activiti/form-viewer.component.css

@@ -0,0 +1,3 @@
+.activiti-form-viewer {
+    margin: 10px;
+}

demo-shell/src/app/components/activiti/form-viewer.component.html

@@ -0,0 +1,11 @@
+<div class="activiti-form-viewer" *ngIf="taskId">
+    <adf-form [taskId]="taskId"></adf-form>
+    <!--<adf-form [formName]="'activitiForms:patientFolder'"-->
+                       <!--[saveMetadata]="true"-->
+                       <!--[path]="'/Sites/swsdp/documentLibrary'"-->
+                       <!--[nameNode]="'test'"></adf-form>-->
+    <!--<adf-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
+                   <!--[saveMetadata]="true"-->
+                   <!--[path]="'/Sites/swsdp/documentLibrary'">-->
+    <!--</adf-form>-->
+</div>

demo-shell/src/app/components/activiti/form-viewer.component.ts

@@ -0,0 +1,46 @@
+/*!
+ * @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, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs/Rx';
+
+@Component({
+    selector: 'form-viewer',
+    templateUrl: './form-viewer.component.html',
+    styleUrls: ['./form-viewer.component.css']
+})
+export class FormViewerComponent implements OnInit, OnDestroy {
+
+    taskId: string;
+
+    private sub: Subscription;
+
+    constructor(private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.sub = this.route.params.subscribe(params => {
+            this.taskId = params['id'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+
+}

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -0,0 +1,47 @@
+<mat-sidenav-container class="adf-nav-container">
+    <mat-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
+        <mat-nav-list>
+            <a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
+                <mat-icon matListIcon>{{link.icon}}</mat-icon>
+                <span>{{link.title | translate }}</span>
+            </a>
+            <a mat-list-item adf-logout (click)="sidenav.close()">
+                <mat-icon matListIcon>exit_to_app</mat-icon>
+                <span>Logout</span>
+            </a>
+        </mat-nav-list>
+    </mat-sidenav>
+
+    <mat-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
+        <adf-userinfo
+            class="adf-app-layout-user-profile"
+            [menuPositionX]="'before'"
+            [menuPositionY]="'above'">
+        </adf-userinfo>
+
+        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+
+        <div class="adf-app-layout-menu-spacer"></div>
+
+        <adf-search-bar class="adf-search-bar-overflow" fxFlex="0 1 auto"></adf-search-bar>
+
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  mat-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
+        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="login" href="" routerLink="/login">Login</a>
+
+        <theme-picker></theme-picker>
+        <button mat-icon-button [matMenuTriggerFor]="langMenu">
+            <mat-icon>language</mat-icon>
+        </button>
+        <mat-menu #langMenu="matMenu">
+            <adf-language-menu></adf-language-menu>
+        </mat-menu>
+
+        <button mat-icon-button (click)="sidenav.open()">
+            <mat-icon>menu</mat-icon>
+        </button>
+    </mat-toolbar>
+
+    <router-outlet></router-outlet>
+</mat-sidenav-container>

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -0,0 +1,73 @@
+@mixin adf-app-layout-theme($theme) {
+  $primary: map-get($theme, primary);
+  $minimumAppWidth: 320px;
+  $toolbarHeight: 64px;
+
+  .adf-app-layout {
+    display: block;
+    min-width: $minimumAppWidth;
+    height: 100%;
+
+    .adf-nav-container {
+      display: block;
+      min-width: $minimumAppWidth;
+      height: 100%;
+    }
+
+    .adf-sidenav-link {
+      &.active {
+        color: mat-color($primary);
+      }
+    }
+
+    .adf-search-bar-overflow {
+        overflow: hidden;
+    }
+
+    &-user-profile {
+      margin-right: 10px;
+    }
+
+    &-menu-spacer {
+      flex: 1 1 auto;
+    }
+
+    &-toolbar {
+      height: $toolbarHeight;
+      line-height: $toolbarHeight;
+      overflow: hidden;
+
+      mat-toolbar-row {
+        height: $toolbarHeight;
+        align-items: stretch;
+        justify-content: space-between;
+      }
+
+      .adf-toolbar-link {
+        min-width: 0;
+        line-height: $toolbarHeight;
+
+        &.active {
+          background-color: rgba(0, 0, 0, .12);
+        }
+      }
+    }
+  }
+
+  @media screen and  ($mat-small) {
+    .adf-userinfo-name {
+      display: none;
+    }
+
+    .adf-search-bar-overflow {
+        padding-right: 4px;
+    }
+  }
+
+  @media screen and ($mat-xsmall) {
+      .adf-search-bar-overflow {
+          padding-right: 16px;
+      }
+  }
+
+}

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -0,0 +1,48 @@
+/*!
+ * @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, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    templateUrl: 'app-layout.component.html',
+    styleUrls: ['app-layout.component.scss'],
+    host: {
+        'class': 'adf-app-layout'
+    },
+    encapsulation: ViewEncapsulation.None
+})
+export class AppLayoutComponent {
+
+    links: Array<any> = [
+        { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
+        { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
+        { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
+        { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
+        { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
+        { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
+        { href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
+        { href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
+        { href: '/uploader', icon: 'file_upload', title: 'APP_LAYOUT.UPLOADER' },
+        { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
+        { href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
+        { href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },
+        { href: '/settings', icon: 'settings', title: 'APP_LAYOUT.SETTINGS' },
+        { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
+    ];
+
+    constructor(){};
+}

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

@@ -0,0 +1,43 @@
+<div class="p-10">
+    <adf-datatable
+        [data]="data"
+        [selectionMode]="selectionMode"
+        [multiselect]="multiselect"
+        [actions]="true"
+        rowStyleClass="custom-row-style"
+        (showRowActionsMenu)="onShowRowActionsMenu($event)"
+        (executeRowAction)="onExecuteRowAction($event)"
+        (row-click)="onRowClick($event)"
+        (row-dblclick)="onRowDblClick($event)">
+        <!-- HTML column definition demo -->
+        <!--
+        <data-columns>
+            <data-column type="image" key="icon" [sortable]="false"></data-column>
+            <data-column key="id" title="Id"></data-column>
+            <data-column key="createdOn" title="Created"></data-column>
+            <data-column key="name" title="Name" class="full-width name-column"></data-column>
+            <data-column key="createdBy.name" title="Created By"></data-column>
+        </data-columns>
+        -->
+    </adf-datatable>
+</div>
+<div class="p-10" data-automation-id="multiselect">
+    <mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
+</div>
+<div class="p-10">
+    <p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
+    <mat-form-field>
+        <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+            <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
+                {{mode.viewValue}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>
+<div class="p-10">
+    <button mat-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
+    <button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
+    <button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
+    <button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
+    <button mat-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
+</div>

demo-shell/src/app/components/datatable/datatable.component.scss

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

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

@@ -0,0 +1,206 @@
+/*!
+ * @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, Input } from '@angular/core';
+import { AlfrescoApiService, LogService } from '@alfresco/core';
+import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/core';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+    selector: 'datatable',
+    templateUrl: './datatable.component.html',
+    styleUrls: ['./datatable.component.scss']
+})
+export class DataTableComponent {
+
+    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',
+        email: 'denys.vuika@alfresco.com'
+    };
+
+    constructor(private apiService: AlfrescoApiService, private logService: LogService) {
+        this.reset();
+    }
+
+    reset() {
+        this.data = new ObjectDataTableAdapter(
+            [
+                {
+                    id: 1,
+                    name: 'Name 1',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 1),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://folder_open'
+                },
+                {
+                    id: 2,
+                    name: 'Name 2',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 2),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://accessibility'
+                },
+                {
+                    id: 3,
+                    name: 'Name 3',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 3),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://alarm'
+                },
+                {
+                    id: 4,
+                    name: 'Image 1',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 4),
+                    createdBy: this._createdBy,
+                    icon: this._imageUrl
+                }
+            ],
+            [
+                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                { type: 'text', key: 'id', title: 'Id', sortable: true },
+                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+            ]
+        );
+
+        this.data.setSorting(new DataSorting('id', 'asc'));
+    }
+
+    addRow() {
+        let id = this.data.getRows().length + 1;
+        let row = new ObjectDataRow({
+            id: id,
+            name: 'Name ' + id,
+            createdOn: new Date(),
+            icon: 'material-icons://extension',
+            createdBy: this._createdBy
+        });
+        this.data.getRows().push(row);
+        this.data.sort();
+    }
+
+    replaceRows() {
+        let objects = [
+            {
+                id: 10,
+                name: 'Name 10',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 5),
+                icon: 'material-icons://face'
+            },
+            {
+                id: 11,
+                name: 'Name 11',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 6),
+                icon: 'material-icons://language'
+            },
+            {
+                id: 12,
+                name: 'Name 12',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 7),
+                icon: 'material-icons://pets'
+            },
+            {
+                id: 13,
+                name: 'Image 13',
+                createdBy: this._createdBy,
+                createdOn: new Date(2016, 6, 2, 15, 8, 8),
+                icon: this._imageUrl
+            }
+        ];
+        let rows = objects.map(obj => new ObjectDataRow(obj));
+        this.data.setRows(rows);
+    }
+
+    replaceColumns() {
+        let schema = [
+            { type: 'text', key: 'id', title: 'Id', sortable: true },
+            { type: 'text', key: 'name', title: 'Name', sortable: true, cssClass: 'full-width name-column' }
+        ];
+        let columns = schema.map(col => new ObjectDataColumn(col));
+        this.data.setColumns(columns);
+    }
+
+    onShowRowActionsMenu(event: DataCellEvent) {
+        let myAction = {
+            title: 'Hello'
+            // you custom metadata needed for onExecuteRowAction
+        };
+        event.value.actions = [
+            myAction
+        ];
+    }
+
+    onExecuteRowAction(event: DataRowActionEvent) {
+        let args = event.value;
+        this.logService.log(args.row);
+        this.logService.log(args.action);
+        window.alert(`My custom action: ${args.action.title}`);
+    }
+
+    onRowClick(event) {
+        this.logService.log(event);
+    }
+
+    onRowDblClick(event) {
+        this.logService.log(event);
+    }
+
+    getRowForNode() {
+        let opts: any = {
+            includeSource: true,
+            include: ['path', 'properties', 'allowableOperations']
+        };
+
+        Observable.fromPromise(this.apiService.getInstance().nodes
+            .getNodeInfo('-my-', opts)).subscribe((data) => {
+                this.logService.log('FUnNy');
+                this.logService.log(data);
+                // let objects = new ObjectDataTableAdapter([
+                //     {
+                //         id: data.id,
+                //         name: data.name,
+                //         createdBy: data.createdByUser.displayName,
+                //         createdOn: new Date(data.createdAt),
+                //         icon: 'material-icons://face'
+                //     }],
+                //     [
+                //         { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+                //         { type: 'text', key: 'id', title: 'Id', sortable: true },
+                //         { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
+                //         { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                //         { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true }
+                //     ]);
+                // this.data = objects;
+            });
+    }
+}

demo-shell/src/app/components/file-view/file-view.component.html

@@ -0,0 +1,36 @@
+<ng-container *ngIf="nodeId">
+    <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true">
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['json']">
+        <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
+          <h1>JSON VIEWER</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['png']">
+        <ng-template>
+          <h1>PNG Viewer</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <adf-viewer-extension [supportedExtensions]="['pdf']">
+        <ng-template>
+          <h1>PDF Viewer</h1>
+        </ng-template>
+      </adf-viewer-extension>
+      -->
+
+      <!--
+      <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+        <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+          <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+        </ng-template>
+      </extension-viewer>
+      -->
+    </adf-viewer>
+</ng-container>

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AlfrescoApiService } from '@alfresco/core';
+
+@Component({
+    selector: 'adf-file-view',
+    templateUrl: 'file-view.component.html'
+})
+export class FileViewComponent implements OnInit {
+
+    nodeId: string = null;
+
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        private apiService: AlfrescoApiService) {}
+
+    ngOnInit() {
+        this.route.params.subscribe(params => {
+            const id = params.nodeId;
+            if (id) {
+                this.apiService.getInstance().nodes.getNodeInfo(id).then(
+                    (node) => {
+                        if (node && node.isFile) {
+                            this.nodeId = id;
+                            return;
+                        }
+                        this.router.navigate(['/files', id]);
+                    },
+                    () => this.router.navigate(['/files', id])
+                );
+            }
+        });
+    }
+
+}

demo-shell/src/app/components/files/custom-sources.component.html

@@ -0,0 +1,27 @@
+<adf-toolbar>
+    <adf-toolbar-title>
+        <mat-form-field>
+            <mat-select [(ngModel)]="selectedSource">
+                <mat-option *ngFor="let source of sources" [value]="source.value">
+                    {{ source.title }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </adf-toolbar-title>
+
+    <div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+        <button mat-icon-button
+                (restore)="documentList.reload()"
+                [disabled]="!documentList.selection.length"
+                *ngIf="selectedSource === '-trashcan-'"
+                location="/files"
+                [adf-restore]="documentList.selection">
+            <mat-icon>restore</mat-icon>
+        </button>
+    </div>
+</adf-toolbar>
+<adf-document-list
+    [currentFolderId]="selectedSource"
+    locationFormat="/files"
+    selectionMode="multiple">
+</adf-document-list>

demo-shell/src/app/components/files/custom-sources.component.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, Input, ViewChild } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/content-services';
+
+@Component({
+    selector: 'adf-custom-sources',
+    templateUrl: 'custom-sources.component.html'
+})
+export class CustomSourcesComponent {
+
+    @Input()
+    selectedSource = '-recent-';
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    sources = [
+        { title: 'Favorites', value: '-favorites-' },
+        { title: 'Recent', value: '-recent-' },
+        { title: 'Shared Links', value: '-sharedlinks-' },
+        { title: 'Sites', value: '-sites-' },
+        { title: 'My Sites', value: '-mysites-' },
+        { title: 'Trashcan', value: '-trashcan-' },
+        { title: 'Root', value: '-root-' },
+        { title: 'My', value: '-my-' },
+        { title: 'Shared', value: '-shared-' }
+    ];
+}

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

@@ -0,0 +1,401 @@
+<div class="container">
+    <div class="adf-site-container-style" id="site-container">
+        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false">
+        </adf-sites-dropdown>
+    </div>
+    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
+        <adf-upload-drag-area fxFlex="1 1 auto"
+            [parentId]="getDocumentListCurrentFolderId()"
+            [versioning]="versioning"
+            [adf-node-permission]="'create'"
+            [adf-nodes]="getCurrentDocumentListNode()">
+            <div *ngIf="errorMessage" class="error-message">
+                <button (click)="resetError()" mat-icon-button>
+                    <mat-icon>highlight_off</mat-icon>
+                </button>
+                <span class="error-message--text">{{errorMessage}}</span>
+            </div>
+            <adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
+                <adf-toolbar-title fxFlex="0 1 auto">
+                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
+                                    class="files-breadcrumb"
+                                    root="Personal Files"
+                                    [target]="documentList"
+                                    [folderNode]="documentList.folderNode">
+                    </adf-breadcrumb>
+                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
+                                             class="files-breadcrumb"
+                                             [target]="documentList"
+                                             [folderNode]="documentList.folderNode">
+                    </adf-dropdown-breadcrumb>
+                </adf-toolbar-title>
+
+                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
+
+                <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                    <button mat-icon-button
+                            [adf-create-folder]="getDocumentListCurrentFolderId()">
+                        <mat-icon>create_new_folder</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            [disabled]="!canEditFolder(documentList.selection)"
+                            [adf-edit-folder]="documentList.selection[0]?.entry">
+                        <mat-icon>create</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            [disabled]="!hasSelection(documentList.selection)"
+                            title="Download"
+                            (click)="downloadNodes(documentList.selection)">
+                        <mat-icon>get_app</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            adf-node-permission="delete"
+                            [adf-nodes]="documentList.selection"
+                            (delete)="documentList.reload()"
+                            [adf-delete]="documentList.selection">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                            [disabled]="!documentList.selection.length"
+                            #favorite="adfFavorite"
+                            [adf-node-favorite]="documentList.selection">
+                        <mat-icon>
+                            {{ favorite.hasFavorites() ? 'star' :'star_border' }}
+                        </mat-icon>
+                    </button>
+                </div>
+
+                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
+                    <mat-icon>format_color_fill</mat-icon>
+                </button>
+
+                <mat-menu #themePicker="matMenu">
+                    <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
+                    <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
+                    <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
+                    <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
+                </mat-menu>
+
+                <button mat-icon-button (click)="showVersions = !showVersions">
+                    <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
+                    <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
+                </button>
+
+                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
+
+                <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item
+                            [adf-create-folder]="getDocumentListCurrentFolderId()">
+                        <mat-icon>create_new_folder</mat-icon>
+                        <span>New folder</span>
+                    </button>
+                    <button mat-menu-item
+                            [disabled]="!canEditFolder(documentList.selection)"
+                            [adf-edit-folder]="documentList.selection[0]?.entry">
+                        <mat-icon>create</mat-icon>
+                        <span>Edit folder</span>
+                    </button>
+                    <button mat-menu-item
+                            [disabled]="!hasSelection(documentList.selection)"
+                            title="Download"
+                            (click)="downloadNodes(documentList.selection)">
+                        <mat-icon>get_app</mat-icon>
+                        <span>Download</span>
+                    </button>
+                    <button mat-menu-item
+                            adf-node-permission="delete"
+                            [adf-nodes]="documentList.selection">
+                        <mat-icon>delete</mat-icon>
+                        <span>Delete</span>
+                    </button>
+                </mat-menu>
+            </adf-toolbar>
+            <adf-document-list
+                #documentList
+                [permissionsStyle]="permissionsStyle"
+                [currentFolderId]="currentFolderId"
+                [contextMenuActions]="true"
+                [contentActions]="true"
+                [allowDropFiles]="true"
+                [selectionMode]="selectionMode"
+                [multiselect]="multiselect"
+                [node]="nodeResult"
+                (error)="onNavigationError($event)"
+                (success)="resetError()"
+                (ready)="emitReadyEvent($event)"
+                (preview)="showFile($event)"
+                (folderChange)="onFolderChange($event)"
+                (permissionError)="handlePermissionError($event)">
+                <data-columns>
+                    <data-column
+                        key="$thumbnail"
+                        type="image"
+                        [sortable]="false"
+                        class="image-table-cell">
+                    </data-column>
+                    <data-column
+                        key="name"
+                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                        [formatTooltip]="getNodeNameTooltip"
+                        class="full-width ellipsis-cell">
+                    </data-column>
+                    <!-- Location column demo -->
+                    <!--
+                    <data-column
+                        key="path"
+                        type="location"
+                        format="/files"
+                        title="Location">
+                    </data-column>
+                    -->
+                    <data-column
+                        key="content.sizeInBytes"
+                        title="Size"
+                        type="fileSize">
+                    </data-column>
+                    <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
+                    <!--
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
+                        key="id"
+                        class="full-width ellipsis-cell">
+                        <ng-template let-entry="$implicit">
+                            <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
+                        </ng-template>
+                    </data-column>
+                    -->
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                        key="createdByUser.displayName"
+                        class="desktop-only">
+                    </data-column>
+                    <data-column
+                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
+                        key="createdAt"
+                        type="date"
+                        format="timeAgo"
+                        class="desktop-only">
+                    </data-column>
+                </data-columns>
+
+                <content-actions>
+                    <!-- folder actions -->
+                    <content-action
+                        icon="content_copy"
+                        target="folder"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="copy">
+                    </content-action>
+                    <content-action
+                        icon="redo"
+                        target="folder"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="move">
+                    </content-action>
+                    <content-action
+                        icon="delete"
+                        target="folder"
+                        permission="delete"
+                        [disableWithNoPermission]="true"
+                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
+                        (permissionEvent)="handlePermissionError($event)"
+                        handler="delete">
+                    </content-action>
+                    <!-- document actions -->
+                    <content-action
+                        icon="content_copy"
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.COPY' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="copy">
+                    </content-action>
+                    <content-action
+                        icon="redo"
+                        target="document"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.MOVE' | translate}}"
+                        permission="update"
+                        [disableWithNoPermission]="true"
+                        (error)="onContentActionError($event)"
+                        (success)="onContentActionSuccess($event)"
+                        handler="move">
+                    </content-action>
+                    <content-action
+                        icon="storage"
+                        target="document"
+                        title="Manage versions..."
+                        (execute)="onManageVersions($event)">
+                    </content-action>
+                    <content-action
+                        icon="delete"
+                        target="document"
+                        permission="delete"
+                        [disableWithNoPermission]="true"
+                        (permissionEvent)="handlePermissionError($event)"
+                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
+                        (success)="onDeleteActionSuccess($event)"
+                        handler="delete">
+                    </content-action>
+                </content-actions>
+            </adf-document-list>
+        </adf-upload-drag-area>
+        <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
+            <div info-drawer-content>
+                <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
+                    <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
+                        <adf-version-manager
+                            [node]="documentList.selection[0].entry">
+                        </adf-version-manager>
+                    </ng-container>
+                </ng-container>
+                <ng-template #choose_document_template>
+                    <div class="adf-manage-versions-empty">
+                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+                      {{'VERSION.CHOOSE_FILE' | translate}}
+                    </div>
+                </ng-template>
+                <ng-template #no_permission_to_versions>
+                    <div class="adf-manage-versions-no-permission">
+                        <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
+                      {{'VERSION.NO_PERMISSION' | translate}}
+                    </div>
+                </ng-template>
+            </div>
+        </adf-info-drawer-layout>
+    </div>
+</div>
+
+<context-menu-holder></context-menu-holder>
+
+<div class="adf-content-service-settings">
+
+    <p>Current folder ID: {{ documentList.currentFolderId }}</p>
+
+    <div class="p-10">
+        Selected Nodes:
+        <ul>
+            <li *ngFor="let node of documentList.selection">
+                {{ node.entry.name }}
+            </li>
+        </ul>
+    </div>
+
+    <div class="container">
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
+                {{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <section>
+          <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
+            translate}}
+          </mat-slide-toggle>
+        </section>
+
+        <section>
+            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
+                translate}}
+            </mat-slide-toggle>
+        </section>
+
+        <h5>Upload</h5>
+        <section *ngIf="acceptedFilesTypeShow">
+            <mat-form-field>
+                <input matInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"
+                       data-automation-id="accepted-files-type">
+            </mat-form-field>
+        </section>
+        <section *ngIf="maxSizeShow">
+            <mat-form-field>
+                <input matInput type="number"  placeholder="Max file size" [(ngModel)]="maxFilesSize"
+                       data-automation-id="max-files-size">
+            </mat-form-field>
+        </section>
+        <div *ngIf="!acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [maxFilesSize]="maxFilesSize"
+                (error)="handleUploadError($event)"
+                [versioning]="versioning"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <div *ngIf="acceptedFilesTypeShow">
+            <adf-upload-button
+                #uploadButton
+                tooltip="Custom tooltip"
+                [disabled]="!enableUpload"
+                data-automation-id="multiple-file-upload"
+                [rootFolderId]="documentList.currentFolderId"
+                [acceptedFilesType]="acceptedFilesType"
+                [multipleFiles]="multipleFileUpload"
+                [uploadFolders]="folderUpload"
+                [versioning]="versioning"
+                (error)="handleUploadError($event)"
+                [adf-node-permission]="'create'"
+                [adf-nodes]="getCurrentDocumentListNode()"
+                (permissionEvent)="handlePermissionError($event)">
+            </adf-upload-button>
+        </div>
+        <section>
+            <mat-checkbox [(ngModel)]="enableUpload">
+                {{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
+            </mat-checkbox>
+        </section>
+    </div>
+
+    <div class="p-10">
+        <p>
+            {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
+        </p>
+        <mat-form-field>
+            <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+                <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
+                    {{mode.viewValue}}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+    </div>
+</div>
+
+<file-uploading-dialog #fileDialog></file-uploading-dialog>

demo-shell/src/app/components/files/files.component.scss

@@ -0,0 +1,113 @@
+$minimumDocumentListWidth: 425px;
+
+.container {
+    margin: 10px;
+}
+
+@media only screen and (max-width: 640px) {
+    .container {
+        margin: 0;
+    }
+}
+
+.error-message {
+    text-align: left;
+}
+
+.error-message--text {
+    color: #d50000;
+}
+
+.adf-not-overlay-viewer {
+    height:900px;
+}
+
+adf-document-list ::ng-deep adf-datatable tr.document-list__create {
+    background: green !important;
+}
+
+adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
+    background: red !important;
+}
+
+adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+    fill: #00bcd4;
+}
+
+.adf-site-container-style {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    min-width: 200px;
+}
+
+.adf-content-service-settings {
+    padding: 16px;
+}
+
+.adf-files-toolbar {
+    .adf-toolbar-title {
+        display: flex;
+        width: 100%;
+
+        .adf-breadcrumb {
+            width: 0;
+        }
+    }
+}
+
+.adf-manage-versions-sidebar {
+    width: 300px;
+    color: rgba(0, 0, 0, 0.87);
+
+    .adf-manage-versions-empty,
+    .adf-manage-versions-no-permission {
+        margin: 24px;
+        color: grey;
+        text-align: justify;
+
+        &-icon {
+            display: block;
+            font-size: 48px;
+            margin: 0 auto 32px auto;
+        }
+    }
+
+    & ::ng-deep .adf-info-drawer-layout-header {
+        display: none;
+    }
+
+    & ::ng-deep .adf-info-drawer-layout-content {
+        padding: 0;
+
+        .adf-version-upload,
+        .adf-new-version-file-upload {
+            width: 100%;
+
+            & .mat-raised-button {
+                width: 100%;
+            }
+        }
+
+        .adf-new-version-uploader-container {
+            padding: 8px 24px 16px 24px;
+        }
+    }
+}
+
+@media (max-width: $minimumDocumentListWidth) {
+    adf-document-list ::ng-deep adf-datatable  {
+        & ::ng-deep .adf-data-table-cell--fileSize {
+            display: none;
+        }
+    }
+
+    .adf-site-container-style {
+        width: 100%;
+        display: block;
+
+        & ::ng-deep .adf-site-dropdown-list-element {
+            width: 100%;
+        }
+    }
+}

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

@@ -0,0 +1,379 @@
+/*!
+ * @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, Input, OnInit, OnChanges, OnDestroy, ChangeDetectorRef,
+    EventEmitter, Optional, ViewChild, SimpleChanges, Output
+} from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { MinimalNodeEntity, NodePaging } from 'alfresco-js-api';
+import {
+    AlfrescoApiService, ContentService, TranslationService,
+    FileUploadEvent, FolderCreatedEvent, LogService, NotificationService,
+    SiteModel, UploadService, DataColumn, DataRow
+} from '@alfresco/core';
+
+import { DocumentListComponent, PermissionStyleModel, DownloadZipDialogComponent } from '@alfresco/content-services';
+
+import { VersionManagerDialogAdapterComponent } from './version-manager-dialog-adapter.component';
+import { Subscription } from 'rxjs/Rx';
+
+const DEFAULT_FOLDER_TO_SHOW = '-my-';
+
+@Component({
+    selector: 'adf-files-component',
+    templateUrl: './files.component.html',
+    styleUrls: ['./files.component.scss']
+})
+export class FilesComponent implements OnInit, OnChanges, OnDestroy {
+
+    errorMessage: string = null;
+    fileNodeId: any;
+    showViewer: boolean = false;
+    showVersions: boolean = false;
+
+    toolbarColor = 'default';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
+    @Input()
+        // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
+    currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
+
+    @Input()
+    selectionMode = 'multiple';
+
+    @Input()
+    multiselect = false;
+
+    @Input()
+    multipleFileUpload: boolean = false;
+
+    @Input()
+    folderUpload: boolean = false;
+
+    @Input()
+    acceptedFilesTypeShow: boolean = false;
+
+    @Input()
+    maxSizeShow: boolean = false;
+
+    @Input()
+    versioning: boolean = false;
+
+    @Input()
+    acceptedFilesType: string = '.jpg,.pdf,.js';
+
+    @Input()
+    maxFilesSize: number = null;
+
+    @Input()
+    enableUpload: boolean = true;
+
+    @Input()
+    nodeResult: NodePaging;
+
+    @Output()
+    documentListReady: EventEmitter<any> = new EventEmitter();
+
+    @ViewChild(DocumentListComponent)
+    documentList: DocumentListComponent;
+
+    permissionsStyle: PermissionStyleModel[] = [];
+
+    private onCreateFolder: Subscription;
+    private onEditFolder: Subscription;
+
+    constructor(private changeDetector: ChangeDetectorRef,
+                private apiService: AlfrescoApiService,
+                private notificationService: NotificationService,
+                private uploadService: UploadService,
+                private contentService: ContentService,
+                private dialog: MatDialog,
+                private translateService: TranslationService,
+                private router: Router,
+                @Optional() private route: ActivatedRoute,
+                private logService: LogService) {
+    }
+
+    showFile(event) {
+        const entry = event.value.entry;
+        if (entry && entry.isFile) {
+            this.router.navigate(['/files', entry.id, 'view']);
+        }
+    }
+
+    onFolderChange($event) {
+        this.currentFolderId = $event.value.id;
+        this.router.navigate(['/files', $event.value.id]);
+    }
+
+    toggleFolder() {
+        this.multipleFileUpload = false;
+        this.folderUpload = !this.folderUpload;
+        return this.folderUpload;
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                if (params['id']) {
+                    this.currentFolderId = params['id'];
+                    this.changeDetector.detectChanges();
+                }
+            });
+        }
+
+        this.uploadService.fileUploadComplete.asObservable().debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
+        this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
+        this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
+        this.onCreateFolder = this.contentService.folderCreate.subscribe(value => this.onFolderAction(value));
+        this.onEditFolder = this.contentService.folderEdit.subscribe(value => this.onFolderAction(value));
+
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__create', PermissionsEnum.CREATE));
+        // this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', PermissionsEnum.NOT_CREATE, false, true));
+    }
+
+    ngOnDestroy() {
+        this.onCreateFolder.unsubscribe();
+        this.onEditFolder.unsubscribe();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.nodeResult && changes.nodeResult.currentValue) {
+            this.nodeResult = <NodePaging> changes.nodeResult.currentValue;
+        }
+    }
+
+    getCurrentDocumentListNode(): MinimalNodeEntity[] {
+        if (this.documentList.folderNode) {
+            return [{ entry: this.documentList.folderNode }];
+        } else {
+            return [];
+        }
+    }
+
+    onNavigationError(err: any) {
+        if (err) {
+            this.errorMessage = err.message || 'Navigation error';
+        }
+    }
+
+    resetError() {
+        this.errorMessage = null;
+    }
+
+    onFileUploadEvent(event: FileUploadEvent) {
+        if (event && event.file.options.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderCreated(event: FolderCreatedEvent) {
+        this.logService.log('FOLDER CREATED');
+        this.logService.log(event);
+        if (event && event.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    onFolderAction(node) {
+        this.logService.log(node);
+        if (node && node.parentId === this.documentList.currentFolderId) {
+            this.documentList.reload();
+        }
+    }
+
+    handlePermissionError(event: any) {
+        this.translateService.get('OPERATION.ERROR.NO_PERMISSION_EVENT', {
+            permission: event.permission,
+            action: event.action,
+            type: event.type
+        }).subscribe((message) => {
+            this.notificationService.openSnackMessage(
+                message,
+                4000
+            );
+        })
+    }
+
+    handleUploadError(event: any) {
+        this.notificationService.openSnackMessage(
+            event,
+            4000
+        );
+    }
+
+    emitReadyEvent(event: any) {
+        this.documentListReady.emit(event);
+    }
+
+    onContentActionError(errors) {
+        const errorStatusCode = JSON.parse(errors.message).error.statusCode;
+        let translatedErrorMessage: any;
+
+        switch (errorStatusCode) {
+            case 403:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.PERMISSION');
+                break;
+            case 409:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.CONFLICT');
+                break;
+            default:
+                translatedErrorMessage = this.translateService.get('OPERATION.ERROR.UNKNOWN');
+        }
+
+        this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+    }
+
+    onContentActionSuccess(message) {
+        let translatedMessage: any = this.translateService.get(message);
+        this.notificationService.openSnackMessage(translatedMessage.value, 4000);
+    }
+
+    onDeleteActionSuccess(message) {
+        this.uploadService.fileDeleted.next(message);
+    }
+
+    onManageVersions(event) {
+        const contentEntry = event.value.entry;
+
+        if (this.contentService.hasPermission(contentEntry, 'update')) {
+            this.dialog.open(VersionManagerDialogAdapterComponent, {
+                data: { contentEntry },
+                panelClass: 'adf-version-manager-dialog',
+                width: '630px'
+            });
+        } else {
+            const translatedErrorMessage: any = this.translateService.get('OPERATION.ERROR.PERMISSION');
+            this.notificationService.openSnackMessage(translatedErrorMessage.value, 4000);
+        }
+    }
+
+    getSiteContent(site: SiteModel) {
+        this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
+    }
+
+    getDocumentListCurrentFolderId() {
+        return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
+    }
+
+    hasSelection(selection: Array<MinimalNodeEntity>): boolean {
+        return selection && selection.length > 0;
+    }
+
+    hasOneFileSelected(): boolean {
+        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
+        const hasOneFileSelected = selection && selection.length === 1 && selection[0].entry.isFile;
+        return hasOneFileSelected;
+    }
+
+    userHasPermissionToManageVersions(): boolean {
+        const selection: Array<MinimalNodeEntity> = this.documentList.selection;
+        return this.contentService.hasPermission(selection[0].entry, 'update');
+    }
+
+    downloadNodes(selection: Array<MinimalNodeEntity>) {
+        if (!selection || selection.length === 0) {
+            return;
+        }
+
+        if (selection.length === 1) {
+            this.downloadNode(selection[0]);
+        } else {
+            this.downloadZip(selection);
+        }
+    }
+
+    downloadNode(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const entry = node.entry;
+
+            if (entry.isFile) {
+                this.downloadFile(node);
+            }
+
+            if (entry.isFolder) {
+                this.downloadZip([node]);
+            }
+        }
+    }
+
+    downloadFile(node: MinimalNodeEntity) {
+        if (node && node.entry) {
+            const contentApi = this.apiService.getInstance().content;
+
+            const url = contentApi.getContentUrl(node.entry.id, true);
+            const fileName = node.entry.name;
+
+            this.download(url, fileName);
+        }
+    }
+
+    downloadZip(selection: Array<MinimalNodeEntity>) {
+        if (selection && selection.length > 0) {
+            const nodeIds = selection.map(node => node.entry.id);
+
+            const dialogRef = this.dialog.open(DownloadZipDialogComponent, {
+                width: '600px',
+                data: {
+                    nodeIds: nodeIds
+                }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                this.logService.log(result);
+            });
+        }
+    }
+
+    download(url: string, fileName: string) {
+        if (url && fileName) {
+            const link = document.createElement('a');
+
+            link.style.display = 'none';
+            link.download = fileName;
+            link.href = url;
+
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
+    getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+        if (row) {
+            return row.getValue('name');
+        }
+        return null;
+    }
+
+    canEditFolder(selection: Array<MinimalNodeEntity>): boolean {
+        if (selection && selection.length === 1) {
+            const entry = selection[0].entry;
+
+            if (entry && entry.isFolder) {
+                return this.contentService.hasPermission(entry, 'update');
+            }
+        }
+        return false;
+    }
+}

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html

@@ -0,0 +1,7 @@
+<header mat-dialog-title>Manage versions</header>
+<section mat-dialog-content>
+    <adf-version-manager [node]="contentEntry"></adf-version-manager>
+</section>
+<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button (click)="close()">Close</button>
+</footer>

demo-shell/src/app/components/files/version-manager-dialog-adapter.component.ts

@@ -0,0 +1,38 @@
+/*!
+ * @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, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Component({
+    templateUrl: './version-manager-dialog-adapter.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class VersionManagerDialogAdapterComponent {
+
+    public contentEntry: MinimalNodeEntryEntity;
+
+    constructor(@Inject(MAT_DIALOG_DATA) data: any,
+                private containingDialog?: MatDialogRef<VersionManagerDialogAdapterComponent>) {
+        this.contentEntry = data.contentEntry;
+    }
+
+    close() {
+        this.containingDialog.close();
+    }
+}

demo-shell/src/app/components/form/form-list.component.html

@@ -0,0 +1,8 @@
+<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
+</adf-form-list>
+<div class="form-container" *ngIf="!isEmptyForm()">
+    <adf-form [form]="form" [data]="restoredData">
+    </adf-form>
+</div>
+<button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
+<button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>

demo-shell/src/app/components/form/form-list.component.scss

@@ -0,0 +1,8 @@
+.form-container {
+    padding: 10px;
+}
+
+.store-form-container{
+    width: 80%;
+    height: 80%;
+}

demo-shell/src/app/components/form/form-list.component.ts

@@ -0,0 +1,84 @@
+/*!
+ * @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, ViewChild } from '@angular/core';
+import { FormComponent, FormModel, FormService, LogService } from '@alfresco/core';
+
+@Component({
+    selector: 'form-list',
+    templateUrl: 'form-list.component.html',
+    styleUrls: ['form-list.component.scss']
+})
+export class FormListComponent {
+
+    @ViewChild(FormComponent)
+    activitiForm: FormComponent;
+
+    formList: any [] = [];
+
+    form: FormModel;
+    formId: string;
+
+    storedData: any = {};
+    restoredData: any = {};
+
+    constructor(private formService: FormService, private logService: LogService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            this.logService.log(e.outcome);
+        });
+    }
+
+    onRowDblClick(event: CustomEvent) {
+        let rowForm = event.detail.value.obj;
+
+        this.formService.getFormDefinitionById(rowForm.id).subscribe((formModel) => {
+            let form = this.formService.parseForm(formModel.formDefinition);
+            this.form = form;
+        });
+
+        this.logService.log(rowForm);
+    }
+
+    isEmptyForm() {
+        return this.form === null || this.form === undefined;
+    }
+
+    store() {
+        this.clone(this.activitiForm.form.values, this.storedData);
+        this.logService.log('DATA SAVED');
+        this.logService.log(this.storedData);
+        this.logService.log('DATA SAVED');
+        this.restoredData = null;
+    }
+
+    clone(objToCopyFrom, objToCopyTo) {
+        for (let attribute in objToCopyFrom) {
+            if (objToCopyFrom.hasOwnProperty(attribute)) {
+                objToCopyTo[attribute] = objToCopyFrom[attribute];
+            }
+        }
+        return objToCopyTo;
+    }
+
+    restore() {
+        this.restoredData = this.storedData;
+        this.storedData = {};
+    }
+
+}

demo-shell/src/app/components/form/form.component.css

@@ -0,0 +1,3 @@
+.form-container {
+    padding: 10px;
+}

demo-shell/src/app/components/form/form.component.html

@@ -0,0 +1,4 @@
+<div class="form-container">
+    <adf-form [form]="form">
+    </adf-form>
+</div>

demo-shell/src/app/components/form/form.component.ts

@@ -0,0 +1,48 @@
+/*!
+* @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, Inject, OnInit } from '@angular/core';
+import { FormModel, FormService, LogService } from '@alfresco/core';
+import { InMemoryFormService } from '../../services/in-memory-form.service';
+import { DemoForm } from './demo-form';
+
+@Component({
+    selector: 'form',
+    templateUrl: 'form.component.html',
+    styleUrls: [ 'form.component.css' ],
+    providers: [
+        { provide: FormService, useClass: InMemoryFormService }
+    ]
+})
+export class FormComponent implements OnInit {
+
+    form: FormModel;
+
+    constructor(@Inject(FormService) private formService: InMemoryFormService, private logSevice: LogService) {
+        // Prevent default outcome actions
+        formService.executeOutcome.subscribe(e => {
+            e.preventDefault();
+            this.logSevice.log(e.outcome);
+        });
+    }
+
+    ngOnInit() {
+        let formDefinitionJSON: any = DemoForm.getDefinition();
+        this.form = this.formService.parseForm(formDefinitionJSON);
+    }
+
+}

demo-shell/src/app/components/home/home.component.html

@@ -0,0 +1,187 @@
+<!-- DOCUMENT LIST-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/files">
+            <h2 >
+                <mat-icon>dvr</mat-icon>
+                <span class="adf-home-card__text">DocumentList - Content Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+            <li>
+                <mat-icon>dvr</mat-icon>
+                <span class="adf-home-feature-list__text">Document List</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
+            </li>
+            <li>
+                <mat-icon>file_upload</mat-icon>
+                <span class="adf-home-feature-list__text">Upload</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
+            </li>
+            <li>
+                <mat-icon>view_module</mat-icon>
+                <span class="adf-home-feature-list__text">DataTable</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>
+
+
+<!-- Process Services-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/activiti">
+            <h2 >
+                <mat-icon>apps</mat-icon>
+                <span class="adf-home-card__text">Process Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+            <li>
+                <mat-icon>view_module</mat-icon>
+                <span class="adf-home-feature-list__text">App List</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
+            </li>
+            <li>
+                <mat-icon>view_headline</mat-icon>
+                <span class="adf-home-feature-list__text">Task List</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
+            </li>
+            <li>
+                <mat-icon>view_headline</mat-icon>
+                <span class="adf-home-feature-list__text">Process List</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
+            </li>
+            <li>
+                <mat-icon>view_quilt</mat-icon>
+                <span class="adf-home-feature-list__text">Form</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
+            </li>
+            <li>
+                <mat-icon>pie_chart</mat-icon>
+                <span class="adf-home-feature-list__text">Analytics</span>
+                <a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
+                <a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
+            </li>
+            <li>
+                <mat-icon>view_module</mat-icon>
+                <span class="adf-home-feature-list__text">DataTable</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>
+
+
+<!-- DATATABLE-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/datatable">
+            <h2 >
+                <mat-icon>view_module</mat-icon>
+                <span class="adf-home-card__text">DataTable - Content Services & Process Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Basic table component:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>
+
+<!-- UPLOADER-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/uploader">
+            <h2 >
+                <mat-icon>file_upload</mat-icon>
+                <span class="adf-home-card__text">Uploader - Content Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Basic table uploader component for the Content Services & Process Services:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>
+
+<!-- LOGIN-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/login">
+            <h2 >
+                <mat-icon>account_circle</mat-icon>
+                <span class="adf-home-card__text">Login - Content Services & Process Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Login component for the Content Services and Process Services:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>
+
+<!-- WEBSCRIPT-->
+<mat-card class="adf-home-card">
+    <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/webscript">
+        <h2 >
+            <mat-icon>extension</mat-icon>
+            <span class="adf-home-card__text">Webscript - Content Services</span>
+        </h2>
+    </mat-card-title>
+    <mat-card-content>
+        Displays and creates webscripts in your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>
+
+<!-- TAG-->
+<mat-card class="adf-home-card">
+        <mat-card-title class="adf-home-card-title adf-primary-background-color"  routerLink="/tag">
+            <h2 >
+                <mat-icon>local_offer</mat-icon>
+                <span class="adf-home-card__text">Tag - Content Services</span>
+            </h2>
+        </mat-card-title>
+    <mat-card-content>
+        Displays and adds tags to the node of your Content Services instance:
+        <ul class="adf-home-feature-list">
+            <li>
+                <mat-icon>brightness_1</mat-icon>
+                <span class="adf-home-feature-list__text">Communication with Rest</span>
+                <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+            </li>
+        </ul>
+    </mat-card-content>
+</mat-card>

demo-shell/src/app/components/home/home.component.scss

@@ -0,0 +1,42 @@
+.adf-home-card {
+    float: left;
+    margin: 10px 10px 10px 10px;
+    width: 290px;
+    display: block;
+    overflow-y: auto;
+    height: 400px;
+
+    h2 {
+        line-height: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .material-icons {
+        position: relative;
+        top: 6px;
+    }
+}
+
+.adf-home-card-title {
+    padding: 24px;
+    cursor: pointer;
+    height: 55px;
+    margin: -63px -24px 18px -25px !important;
+}
+
+.adf-home-card__text {
+    font-size: 16px;
+    line-height: 18px;
+}
+
+.adf-home-feature-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+span.home--feature-list__text:before {
+    content: '';
+    padding-left: 4px;
+}

demo-shell/src/app/components/home/home.component.spec.ts

@@ -0,0 +1,36 @@
+/*!
+ * @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 { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+import { CoreModule } from '@alfresco/core';
+
+describe('HomeComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+        imports: [CoreModule],
+        declarations: [HomeComponent],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+  });
+
+  it ('should work', () => {
+    let fixture = TestBed.createComponent(HomeComponent);
+    expect(fixture.componentInstance instanceof HomeComponent).toBe(true, 'should create HomeComponent');
+  });
+});

demo-shell/src/app/components/home/home.component.ts

@@ -0,0 +1,25 @@
+/*!
+ * @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: 'home-view',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {}

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

@@ -0,0 +1,40 @@
+.setting-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+    background-color: rgb(68,138,255);
+    color: rgb(255,255,255);
+}
+
+.settings {
+    border-radius: 8px;
+    position: absolute;
+    background-color: papayawhip;
+    color: cadetblue;
+    left: 10px;
+    top: 10px;
+    z-index: 1;
+}
+
+.toggle {
+    width: 190px;
+    margin: 5px;
+    padding: 5px;
+}
+
+@media (min-width: 721px) {
+    .mobile-settings {
+        display: none;
+    }
+}
+
+@media (max-width: 720px) {
+    .settings {
+        display: none;
+    }
+}
+
+.settings ::ng-deep .mat-slide-toggle-thumb-container {
+    cursor: pointer;
+}

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

@@ -0,0 +1,96 @@
+<!--BPM, ECN AND CSRF TOGGLE-->
+
+<div class="settings">
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch1"
+            [color]="'primary'"
+            (change)="toggleECM()"
+            [checked]="isECM">
+            {{ 'LOGIN.CONTENT_SERVICES'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch2"
+            [color]="'primary'"
+            (change)="toggleBPM()"
+            [checked]="isBPM">
+            {{ 'LOGIN.PROCESS_SERVICES'| translate }}
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch3"
+            [color]="'primary'"
+            (change)="toggleCSRF()"
+            [checked]="!disableCsrf">
+            CSRF
+        </mat-slide-toggle>
+    </p>
+    <p class="toggle">
+        <mat-slide-toggle
+            id="switch4"
+            [color]="'primary'"
+            (change)="toggleFooter()"
+            [checked]="showFooter">
+            {{ 'LOGIN.LOGIN_FOOTER'| translate }}
+        </mat-slide-toggle>
+    </p>
+</div>
+
+<!--SETTING BUTTON-->
+
+<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings">
+    <mat-icon>settings</mat-icon>
+</a>
+
+<adf-login
+    #alfrescologin
+    [providers]="providers"
+    [fieldsValidation]="customValidation"
+    [disableCsrf]="disableCsrf"
+    [showLoginActions]="showFooter"
+    [showRememberMe]="showFooter"
+    copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
+    (success)="onLogin($event)"
+    (error)="onError($event)">
+    <div class="mobile-settings">
+        <p>
+            <mat-slide-toggle
+                id="switch1-mobile"
+                [color]="'primary'"
+                (change)="toggleECM()"
+                [checked]="isECM">
+                {{ 'LOGIN.CONTENT_SERVICES'| translate }}
+            </mat-slide-toggle>
+        </p>
+        <p>
+            <mat-slide-toggle
+                id="switch2-mobile"
+                [color]="'primary'"
+                (change)="toggleBPM()"
+                [checked]="isBPM">
+                {{ 'LOGIN.PROCESS_SERVICES'| translate }}
+            </mat-slide-toggle>
+        </p>
+        <p>
+            <mat-slide-toggle
+                id="switch3-mobile"
+                [color]="'primary'"
+                (change)="toggleCSRF()"
+                [checked]="!disableCsrf">
+                CSRF
+            </mat-slide-toggle>
+        </p>
+        <p>
+            <mat-slide-toggle
+                id="switch4-mobile"
+                [color]="'primary'"
+                (change)="toggleFooter()"
+                [checked]="showFooter">
+                {{ 'LOGIN.LOGIN_FOOTER'| translate }}
+            </mat-slide-toggle>
+        </p>
+    </div>
+</adf-login>

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

@@ -0,0 +1,121 @@
+/*!
+ * @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, OnInit, ViewChild } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { LogService, StorageService } from '@alfresco/core';
+
+@Component({
+    selector: 'login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit {
+
+    @ViewChild('alfrescologin')
+    alfrescologin: any;
+
+    providers: string = 'ECM';
+    customValidation: any;
+
+    disableCsrf: boolean = false;
+    isECM: boolean = true;
+    isBPM: boolean = false;
+    showFooter: boolean = true;
+    customMinLenght: number = 2;
+
+    constructor(private router: Router,
+                private storage: StorageService,
+                private logService: LogService) {
+        this.customValidation = {
+            username: ['', Validators.compose([Validators.required, Validators.minLength(this.customMinLenght)])],
+            password: ['', Validators.required]
+        };
+    }
+
+    ngOnInit() {
+        this.alfrescologin.addCustomValidationError('username', 'required', 'LOGIN.MESSAGES.USERNAME-REQUIRED');
+        this.alfrescologin.addCustomValidationError('username', 'minlength', 'LOGIN.MESSAGES.USERNAME-MIN', {minLenght: this.customMinLenght});
+        this.alfrescologin.addCustomValidationError('password', 'required', 'LOGIN.MESSAGES.PASSWORD-REQUIRED');
+
+        if (this.storage.hasItem('providers')) {
+            this.providers = this.storage.getItem('providers');
+        }
+
+        this.initProviders();
+    }
+
+    initProviders() {
+        if (this.providers === 'BPM') {
+            this.isECM = false;
+            this.isBPM = true;
+        } else if (this.providers === 'ECM') {
+            this.isECM = true;
+            this.isBPM = false;
+        } else if (this.providers === 'ALL') {
+            this.isECM = true;
+            this.isBPM = true;
+        }
+    }
+
+    onLogin($event) {
+        this.router.navigate(['/home']);
+    }
+
+    onError($event) {
+        this.logService.error($event);
+    }
+
+    toggleECM() {
+        this.isECM = !this.isECM;
+        this.storage.setItem('providers', this.updateProvider());
+    }
+
+    toggleBPM() {
+        this.isBPM = !this.isBPM;
+        this.storage.setItem('providers', this.updateProvider());
+    }
+
+    toggleCSRF() {
+        this.disableCsrf = !this.disableCsrf;
+    }
+
+    toggleFooter() {
+        this.showFooter = !this.showFooter;
+    }
+
+    updateProvider() {
+        if (this.isBPM && this.isECM) {
+            this.providers = 'ALL';
+            return this.providers;
+        }
+
+        if (this.isECM) {
+            this.providers = 'ECM';
+            return this.providers;
+        }
+
+        if (this.isBPM) {
+            this.providers = 'BPM';
+            return this.providers;
+        }
+
+        this.providers = '';
+        return this.providers;
+    }
+}

demo-shell/src/app/components/search/search-bar.component.html

@@ -0,0 +1,8 @@
+<adf-search-control [highlight]="true"
+    (optionClicked)="onItemClicked($event)"
+    (submit)="onSearchSubmit($event)">
+</adf-search-control>
+
+<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed" [fileNodeId]="fileNodeId" [overlayMode]="true">
+  <mat-spinner></mat-spinner>
+</adf-viewer>

demo-shell/src/app/components/search/search-bar.component.scss

@@ -0,0 +1,5 @@
+
+.adf-search-elements {
+  display: flex;
+  align-items: center;
+}

demo-shell/src/app/components/search/search-bar.component.ts

@@ -0,0 +1,70 @@
+/*!
+ * @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, EventEmitter, Output, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { MinimalNodeEntity } from 'alfresco-js-api';
+import { AuthenticationService } from '@alfresco/core';
+
+@Component({
+    selector: 'adf-search-bar',
+    templateUrl: './search-bar.component.html',
+    styleUrls: ['./search-bar.component.scss']
+})
+export class SearchBarComponent {
+
+    @Input()
+    expandable: boolean = true;
+
+    @Output()
+    expand = new EventEmitter();
+
+    fileNodeId: string;
+    fileShowed: boolean = false;
+    searchTerm: string = '';
+    subscriptAnimationState: string;
+
+    constructor(public router: Router,
+                public authService: AuthenticationService) {
+    }
+
+    isLoggedIn(): boolean {
+        return this.authService.isLoggedIn();
+    }
+
+    /**
+     * Called when the user submits the search, e.g. hits enter or clicks submit
+     *
+     * @param event Parameters relating to the search
+     */
+    onSearchSubmit(event: KeyboardEvent) {
+      let value = (event.target as HTMLInputElement).value;
+      this.router.navigate(['/search', {
+          q: value
+      }]);
+  }
+
+  onItemClicked(event: MinimalNodeEntity) {
+      if (event.entry.isFile) {
+          this.fileNodeId = event.entry.id;
+          this.fileShowed = true;
+      } else if (event.entry.isFolder) {
+          this.router.navigate(['/files', event.entry.id]);
+      }
+  }
+
+}

demo-shell/src/app/components/search/search-result.component.html

@@ -0,0 +1,10 @@
+<adf-search [searchTerm]="searchedWord"
+            (resultLoaded)="showSearchResult($event)"
+            #search>
+</adf-search>
+
+<adf-files-component
+        [currentFolderId]="null"
+        [nodeResult]="resultNodePageList"
+        (documentListReady)="refreshResults($event)">
+</adf-files-component>

demo-shell/src/app/components/search/search-result.component.scss

@@ -0,0 +1,20 @@
+div.search-results-container {
+    padding: 0 20px 20px 20px;
+}
+
+.adf-search-title {
+    font-size: 22px;
+    padding: 15px 0 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .col-display-name {
+        min-width: 100px;
+    }
+    :host .col-modified-at, :host .col-modified-by {
+        display: none;
+    }
+    :host div.search-results-container table {
+        width: 100%;
+    }
+}

demo-shell/src/app/components/search/search-result.component.ts

@@ -0,0 +1,59 @@
+/*!
+ * @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, OnInit, Optional, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import { NodePaging } from 'alfresco-js-api';
+import { SearchComponent } from '@alfresco/content-services';
+
+@Component({
+    selector: 'adf-search-result-component',
+    templateUrl: './search-result.component.html',
+    styleUrls: ['./search-result.component.scss']
+})
+export class SearchResultComponent implements OnInit {
+
+    @ViewChild('search')
+    search: SearchComponent;
+
+    fileNodeId: string;
+    queryParamName = 'q';
+    searchedWord: string = '';
+    fileShowed: boolean = false;
+    navigationMode: string = 'dblclick';
+    resultNodePageList: NodePaging;
+
+    constructor(public router: Router,
+                @Optional() private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.searchedWord = params.hasOwnProperty(this.queryParamName) ? params[this.queryParamName] : null;
+            });
+        }
+    }
+
+    showSearchResult(event: NodePaging) {
+        this.resultNodePageList = event;
+    }
+
+    refreshResults(event: any) {
+        this.search.reload();
+    }
+}

demo-shell/src/app/components/settings/settings.component.html

@@ -0,0 +1 @@
+<adf-host-settings (error)="onError($event)"></adf-host-settings>

demo-shell/src/app/components/settings/settings.component.ts

@@ -0,0 +1,33 @@
+/*!
+ * @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 { LogService } from '@alfresco/core';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: 'settings.component.html'
+})
+export class SettingsComponent {
+
+  constructor(public logService: LogService){
+  }
+
+  onError(error: string){
+    this.logService.log(error)
+  }
+}

demo-shell/src/app/components/social/social.component.html

@@ -0,0 +1,21 @@
+<label for="nodeId"><b>Insert Node Id</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+
+<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-social-title">
+                {{'SOCIAL.LIKE' | translate }}
+            </div>
+            <adf-like [nodeId]="nodeId"></adf-like>
+        </mat-card>
+    </div>
+    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-social-title">
+                {{'SOCIAL.RATING' | translate }}
+            </div>
+            <adf-rating [nodeId]="nodeId"></adf-rating>
+        </mat-card>
+    </div>
+</div>

demo-shell/src/app/components/social/social.component.scss

@@ -0,0 +1,8 @@
+.adf-social-example-area {
+    margin: 10px;
+}
+
+
+.adf-social-example-title {
+    padding-bottom: 12px;
+}

demo-shell/src/app/components/social/social.component.ts

@@ -0,0 +1,28 @@
+/*!
+ * @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: 'alfresco-social',
+    templateUrl: 'social.component.html',
+    styleUrls: ['social.component.scss']
+})
+export class SocialComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

demo-shell/src/app/components/tag/tag.component.html

@@ -0,0 +1,25 @@
+<label for="nodeId"><b>{{'TAG.INSERT' | translate }}</b></label><br>
+<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
+<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
+        </mat-card>
+    </div>
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-tag-example-title">
+                {{'TAG.LIST' | translate }}
+            </div>
+            <adf-tag-list></adf-tag-list>
+        </mat-card>
+    </div>
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <mat-card>
+            <div class="adf-tag-example-title">
+                {{'TAG.NODE_LIST' | translate }}
+            </div>
+            <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
+        </mat-card>
+    </div>
+</div>

demo-shell/src/app/components/tag/tag.component.scss

@@ -0,0 +1,8 @@
+.adf-tag-example-area {
+    margin: 10px;
+}
+
+
+.adf-tag-example-title {
+    padding-bottom: 12px;
+}

demo-shell/src/app/components/tag/tag.component.ts

@@ -0,0 +1,28 @@
+/*!
+ * @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: 'alfresco-tag',
+    templateUrl: 'tag.component.html',
+    styleUrls: ['tag.component.scss']
+})
+export class TagComponent {
+
+    nodeId: string = '74cd8a96-8a21-47e5-9b3b-a1b3e296787d';
+}

demo-shell/src/app/components/theme-picker/style-manager/style-manager.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
+ * removed or changed later.
+ */
+@Injectable()
+export class StyleManager {
+  /**
+   * Set the stylesheet with the specified key.
+   */
+  setStyle(key: string, href: string) {
+    getLinkElementForKey(key).setAttribute('href', href);
+  }
+
+  /**
+   * Remove the stylesheet with the specified key.
+   */
+  removeStyle(key: string) {
+    const existingLinkElement = getExistingLinkElementByKey(key);
+    if (existingLinkElement) {
+      document.head.removeChild(existingLinkElement);
+    }
+  }
+}
+
+function getLinkElementForKey(key: string) {
+  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
+}
+
+function getExistingLinkElementByKey(key: string) {
+  return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
+}
+
+function createLinkElementWithKey(key: string) {
+  const linkEl = document.createElement('link');
+  linkEl.setAttribute('rel', 'stylesheet');
+  linkEl.setAttribute('type', 'text/css');
+  linkEl.classList.add(getClassNameForKey(key));
+  document.head.appendChild(linkEl);
+  return linkEl;
+}
+
+function getClassNameForKey(key: string) {
+  return `style-manager-${key}`;
+}

demo-shell/src/app/components/theme-picker/theme-picker.css

@@ -0,0 +1,26 @@
+.docs-theme-picker-menu .mat-menu-content {
+    padding: 8px;
+}
+
+.docs-theme-picker-menu [mat-menu-item] {
+    flex: 0 0 auto;
+    padding: 0;
+    overflow: hidden;
+}
+
+
+.docs-theme-picker-menu .docs-theme-picker-primary {
+    width: 25px;
+    height: 25px;
+}
+
+.docs-theme-picker-menu .docs-theme-picker-accent {
+     position: absolute;
+     bottom: 6px;
+     width: 100%;
+     height: 6px;
+ }
+
+.docs-theme-chosen-icon{
+    border-radius: 13px;
+}

demo-shell/src/app/components/theme-picker/theme-picker.html

@@ -0,0 +1,17 @@
+<button mat-icon-button [mat-menu-trigger-for]="themeMenu" matTooltip="Select a theme!">
+    <mat-icon>format_color_fill</mat-icon>
+</button>
+
+<mat-menu class="docs-theme-picker-menu" #themeMenu="matMenu" x-position="before">
+    <button *ngFor="let theme of themes"  mat-menu-item (click)="installTheme(theme)" >
+        <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+                 [style.background]="theme.primary"
+                 *ngIf="currentTheme === theme">check_circle
+        </mat-icon>
+        <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
+                 [style.background]="theme.primary"
+                 *ngIf="currentTheme !== theme">invert_colors
+        </mat-icon>
+        {{theme.name}}
+    </button>
+</mat-menu>

demo-shell/src/app/components/theme-picker/theme-picker.ts

@@ -0,0 +1,132 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import {
+    MatButtonModule, MatGridListModule, MatIconModule, MatMenuModule,
+    MatTooltipModule, MatListModule
+} from '@angular/material';
+import { StyleManager } from './style-manager/style-manager';
+import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
+
+@Component({
+    selector: 'theme-picker',
+    templateUrl: 'theme-picker.html',
+    styleUrls: ['theme-picker.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {'aria-hidden': 'true'}
+})
+export class ThemePickerComponent {
+    currentTheme;
+
+    themes = [
+        {
+            primary: '#ff9800',
+            accent: '#3f51b5',
+            name: 'Developer Theme',
+            href: '',
+            isDefault: true
+        },
+        {
+            primary: '#00bcd4',
+            accent: '#ff9800',
+            name: 'ECM Cyan Orange',
+            href: 'adf-cyan-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#00bcd4',
+            accent: '#3f51b5',
+            name: 'ECM Cyan Purple',
+            href: 'adf-cyan-purple.css',
+            isDark: false
+        },
+        {
+            primary: '#8bc34a',
+            accent: '#ff9800',
+            name: 'BPM Green Orange',
+            href: 'adf-green-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#8bc34a',
+            accent: '#3f51b5',
+            name: 'BPM Green Purple',
+            href: 'adf-green-purple.css',
+            isDark: false
+        },
+        {
+            primary: '#3f51b5',
+            accent: '#ff4081',
+            name: 'Indigo Pink',
+            href: 'adf-indigo-pink.css',
+            isDark: false
+        },
+        {
+            primary: '#c2185b',
+            accent: '#b0bec5',
+            name: 'Pink Bluegrey Dark',
+            href: 'adf-pink-bluegrey.css',
+            isDark: false
+        },
+        {
+            primary: '#7b1fa2',
+            accent: '#69f0ae',
+            name: 'Purple Green Dark',
+            href: 'adf-purple-green.css',
+            isDark: false
+        },
+        {
+            primary: '#2196f3',
+            accent: '#ff9800',
+            name: 'ECM Blue Orange',
+            href: 'adf-blue-orange.css',
+            isDark: false
+        },
+        {
+            primary: '#2196f3',
+            accent: '#3f51b5',
+            name: 'ECM Blue Purple',
+            href: 'adf-blue-purple.css',
+            isDark: false
+        }
+    ];
+
+    constructor(public styleManager: StyleManager,
+                private _themeStorage: ThemeStorage) {
+
+    }
+
+    installTheme(theme: DocsSiteTheme) {
+        if (theme.isDefault === true) {
+            this.styleManager.setStyle('theme', ``);
+        } else {
+            this.currentTheme = this._getCurrentThemeFromHref(theme.href);
+
+            this.styleManager.setStyle('theme', `prebuilt-themes/${theme.href}`);
+
+            if (this.currentTheme) {
+                this._themeStorage.storeTheme(this.currentTheme);
+            }
+        }
+    }
+
+    private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
+        return this.themes.find(theme => theme.href === href);
+    }
+}
+
+@NgModule({
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatGridListModule,
+        MatTooltipModule,
+        MatListModule,
+        CommonModule
+    ],
+    exports: [ThemePickerComponent],
+    declarations: [ThemePickerComponent],
+    providers: [StyleManager, ThemeStorage]
+})
+export class ThemePickerModule {
+}

demo-shell/src/app/components/theme-picker/theme-storage/theme-storage.ts

@@ -0,0 +1,39 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+export interface DocsSiteTheme {
+  href: string;
+  name: string;
+  accent: string;
+  primary: string;
+  isDark?: boolean;
+  isDefault?: boolean;
+}
+
+@Injectable()
+export class ThemeStorage {
+  static storageKey = 'docs-theme-storage-current';
+
+  public onThemeUpdate: EventEmitter<DocsSiteTheme> = new EventEmitter<DocsSiteTheme>();
+
+  public storeTheme(theme: DocsSiteTheme) {
+    try {
+      window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme);
+    } catch (e) { }
+
+    this.onThemeUpdate.emit(theme);
+  }
+
+  public getStoredTheme(): DocsSiteTheme {
+    try {
+      return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  public clearStorage() {
+    try {
+      window.localStorage.removeItem(ThemeStorage.storageKey);
+    } catch (e) { }
+  }
+}

demo-shell/src/app/components/webscript/webscript.component.html

@@ -0,0 +1,14 @@
+<label for="script-path"><b>Insert a scriptPath</b></label><br>
+<input id="script-path" type="text" size="48" [(ngModel)]="scriptPath"><br>
+<label for="context-root"><b>Insert a contextRoot</b></label><br>
+<input id="context-root" type="text" size="48" [(ngModel)]="contextRoot"><br>
+<label for="service-path"><b>Insert a servicePath</b></label><br>
+<input id="service-path" type="text" size="48" [(ngModel)]="servicePath"><br>
+<adf-webscript-get
+    [scriptPath]="scriptPath"
+    [scriptArgs]="scriptArgs"
+    [contextRoot]="contextRoot"
+    [servicePath]="servicePath"
+    [contentType]="'HTML'"
+    (success)= "logData($event)">
+</adf-webscript-get>

demo-shell/src/app/components/webscript/webscript.component.ts

@@ -0,0 +1,41 @@
+/*!
+ * @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 { LogService } from '@alfresco/core';
+
+@Component({
+    selector: 'alfresco-webscript',
+    templateUrl: 'webscript.component.html'
+})
+export class WebscriptComponent {
+
+    currentPath: string = '/';
+    authenticated: boolean;
+    host: string = 'http://127.0.0.1:8080';
+    scriptPath: string = 'sample/folder/Company%20Home';
+    contextRoot: string = 'alfresco';
+    servicePath: string = 'service';
+    scriptArgs: string = '';
+
+    constructor(private logService: LogService) {
+    }
+
+    logData(data) {
+        this.logService.log(data);
+    }
+}

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

@@ -0,0 +1,50 @@
+/*!
+ * @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 {
+    MatDialogModule,
+    MatInputModule,
+    MatProgressBarModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatCardModule,
+    MatListModule,
+    MatMenuModule,
+    MatToolbarModule
+} from '@angular/material';
+
+const MATERIAL_MODULES = [
+    MatSlideToggleModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDialogModule,
+    MatSidenavModule,
+    MatProgressBarModule,
+    MatCardModule,
+    MatListModule,
+    MatMenuModule,
+    MatToolbarModule
+];
+
+@NgModule({
+    imports: MATERIAL_MODULES,
+    exports: MATERIAL_MODULES
+})
+export class MaterialModule {
+}

demo-shell/src/app/services/debug-app-config.service.ts

@@ -0,0 +1,37 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AppConfigService, StorageService } from '@alfresco/core';
+
+@Injectable()
+export class DebugAppConfigService extends AppConfigService {
+
+    constructor(private storage: StorageService, http: HttpClient) {
+        super(http);
+    }
+
+    /** @override */
+    get<T>(key: string): T {
+        if (key === 'ecmHost' || key === 'bpmHost') {
+            return <T> (<any> this.storage.getItem(key) || super.get<T>(key));
+        }
+        return super.get<T>(key);
+    }
+
+}

demo-shell/src/app/services/in-memory-form.service.ts

@@ -0,0 +1,80 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import { AppConfigService, AlfrescoApiService, EcmModelService, LogService, FormFieldOption, FormService } from '@alfresco/core';
+import { Observable } from 'rxjs/Observable';
+
+interface ActivitiData {
+    rest: {
+        fields: Array<{
+            processId?: string,
+            taskId?: string,
+            fieldId?: string,
+            values?: Array<{
+                id: string,
+                name: string
+            }>
+        }>
+    };
+}
+//
+@Injectable()
+export class InMemoryFormService extends FormService {
+
+    private data: ActivitiData;
+
+    constructor(appConfig: AppConfigService,
+                ecmModelService: EcmModelService,
+                apiService: AlfrescoApiService,
+                protected logService: LogService) {
+        super(ecmModelService, apiService, logService);
+        this.data = appConfig.get<ActivitiData>('activiti');
+    }
+
+    /** @override */
+    getRestFieldValues(taskId: string, field: string): Observable<any> {
+        // Uncomment this to use original call
+        // return super.getRestFieldValues(taskId, fieldId);
+
+        this.logService.log(`getRestFieldValues: ${taskId} => ${field}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.taskId === taskId && f.fieldId === field
+            );
+            let values: FormFieldOption[] = field.values || [];
+            this.logService.log(values);
+            observer.next(values);
+        });
+    }
+
+    /** @override */
+    getRestFieldValuesByProcessId(processDefinitionId: string, fieldId: string): Observable<any> {
+        //  Uncomment this to use original call
+        //  return super.getRestFieldValuesByProcessId(processDefinitionId, fieldId);
+
+        this.logService.log(`getRestFieldValuesByProcessId: ${processDefinitionId} => ${fieldId}`);
+        return new Observable<FormFieldOption[]>(observer => {
+            let field = this.data.rest.fields.find(
+                f => f.processId === processDefinitionId && f.fieldId === fieldId
+            );
+            let values: FormFieldOption[] = field.values || [];
+            this.logService.log(values);
+            observer.next(values);
+        });
+    }
+}

demo-shell/src/custom-style.scss

@@ -0,0 +1,24 @@
+@import './app/components/app-layout/app-layout.component.scss';
+
+@import 'content-services/styles/index';
+@import 'process-services/styles/index';
+@import 'insights/styles/index';
+@import 'core/styles/index';
+
+@import '~@angular/material/theming';
+
+@include mat-core($alfresco-typography);
+
+$primary: mat-palette($alfresco-accent-orange);
+$accent:  mat-palette($alfresco-accent-purple);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
+
+@include adf-app-layout-theme($theme);
+
+@include adf-content-services-theme($theme);
+@include adf-process-services-theme($theme);
+@include adf-insights-theme($theme);
+@include adf-core-theme($theme);

demo-shell/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

demo-shell/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

demo-shell/src/index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ACS APS ADF Application with Angular CLI</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
+  <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
+
+  <style>
+      body, html {
+          height: 100%;
+      }
+
+      .loader-container {
+          display: flex;
+          flex-direction: row;
+          height:100%;
+
+          align-items: center;
+          justify-content: center;
+      }
+
+      .loader-item {
+          max-height:100px;
+          max-width:300px;
+      }
+
+      .loader-text{
+          white-space: nowrap;
+          text-align: center;
+          position: relative;
+      }
+  </style>
+</head>
+<body class="adf-background-color">
+<app-root>
+  <div id="loader-container" class="loader-container">
+    <div class="loader-item">
+      <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
+    </div>
+  </div>
+</app-root>
+</body>
+</html>

demo-shell/src/main.ts

@@ -0,0 +1,19 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+import 'hammerjs';
+import 'chart.js';
+import 'ng2-charts';
+// import 'ng2-3d-editor';
+import 'three';
+
+import pdfjsLib from 'pdfjs-dist';
+pdfjsLib.PDFJS.workerSrc = 'pdf.worker.js';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demo-shell/src/polyfills.ts

@@ -0,0 +1,77 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+ import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'core-js/es6/array';
+import 'core-js/es7/array';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+import 'intl';  // Run `npm install --save intl`.
+
+/**
+ * Support custom event in IE11
+ *
+ * */
+import 'custom-event-polyfill/custom-event-polyfill'  // Run `npm install --save custom-event-polyfill`.
+

demo-shell/src/styles.scss

@@ -0,0 +1,10 @@
+@import '~@angular/material/theming';
+@import './custom-style.scss';
+
+body, html {
+    margin: 0;
+    height: 100%;
+    font-size: mat-font-size($alfresco-typography, body-1);
+    font-family: mat-font-family($alfresco-typography);
+    line-height: mat-line-height($alfresco-typography, body-1);
+}

demo-shell/src/test.ts

@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

demo-shell/src/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

demo-shell/src/tsconfig.dev.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "rootDir": "..",
+    "baseUrl": ".",
+    "skipLibCheck": false,
+    "types": [],
+    "paths": {
+      "alfresco-js-api": [
+        "../node_modules/alfresco-js-api/dist/alfresco-js-api.js"
+      ],
+      "rxjs/*": [
+        "../node_modules/rxjs/*"
+      ],
+      "@angular/*": [
+        "../node_modules/@angular/*"
+      ],
+      "@alfresco/*": [
+        "../../lib/*"
+      ]
+    }
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ],
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": false
+  }
+}

demo-shell/src/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}