Remove discovery (#5212)

* remove discovery

* remoce discovery test

* fix save remote

* use host acs to save screenshot

* fix e2e

* remove invalid test

* fix the package version

.gitignore

@@ -4,6 +4,7 @@ bundles
 workspace.xml
 .idea/
 .env.*
+.env
 dist/
 e2e/.env.cloud
 tmp

.travis.yml

@@ -24,17 +24,17 @@ branches:
 # TRAVIS_PULL_REQUEST == false means is running on dev branch and is not a PR
 stages:
   - name: Lint & Build Dist
-    if: type = pull_request
+    if: type = pull_request OR type = api
   - name: Lint & Build Dist & Release
     if: (type = push OR type = cron) AND tag IS blank
   - name: Check bundle
     if: type = push AND tag IS blank
   - name: Unit test
-    if: type != cron AND tag IS blank
+    if: (type != cron AND tag IS blank) OR type = api
   - name: Update Rancher
-    if: type = push AND tag IS blank
+    if: (type = push AND tag IS blank)
   - name: e2e Test
-    if: type != cron AND tag IS blank
+    if: (type != cron AND tag IS blank) OR type = api
   - name: Update Rancher PR
     if: type = pull_request
   - name: Update Children Projects

README.md

@@ -1,13 +1,14 @@
 # Alfresco Application Development Framework (ADF)
 
+| branch | status |
+| --- | --- |
+| master | [![Build Status](https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master)](https://travis-ci.org/Alfresco/alfresco-ng2-components) |
+| development | [![Build Status](https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=development)](https://travis-ci.org/Alfresco/alfresco-ng2-components) |
+
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/d9eb873741da403bb3284778102372e7)](https://www.codacy.com/app/Alfresco/alfresco-ng2-components?utm_source=github.com&utm_medium=referral&utm_content=Alfresco/alfresco-ng2-components&utm_campaign=badger)
 [![Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components](https://badges.gitter.im/Alfresco/alfresco-ng2-components.svg)](https://gitter.im/Alfresco/alfresco-ng2-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 <p>
-  <a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
-    <img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master'  alt='travis
-    Status' />
-  </a>
   <a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
     <img src='http://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
   </a>

angular.json

@@ -320,7 +320,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/insights/i18n",
+                "input": "lib/insights/src/lib/i18n",
                 "output": "/assets/adf-insights/i18n"
               },
               {
@@ -489,7 +489,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "lib/insights/i18n",
+                "input": "lib/insights/src/lib/i18n",
                 "output": "/assets/adf-insights/i18n"
               },
               {
@@ -601,7 +601,7 @@
     },
     "content-services": {
       "root": "lib/content-services",
-      "sourceRoot": "lib/content-services",
+      "sourceRoot": "lib/content-services/src",
       "projectType": "library",
       "prefix": "adf",
       "architect": {
@@ -620,7 +620,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "lib/content-services/test.ts",
+            "main": "lib/content-services/src/test.ts",
             "tsConfig": "lib/content-services/tsconfig.spec.json",
             "karmaConfig": "lib/content-services/karma.conf.js",
             "codeCoverage": true,
@@ -632,7 +632,7 @@
           "options": {
             "tsConfig": [
               "lib/content-services/tsconfig.lib.json",
-              "lib/content-services/tsconfig.lib.json"
+              "lib/content-services/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -734,7 +734,7 @@
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "lib/extensions/tsconfig.lib.json",
+            "tsConfig": "lib/insights/tsconfig.lib.json",
             "project": "lib/insights/ng-package.json"
           },
           "configurations": {
@@ -746,8 +746,8 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "lib/insights/test.ts",
-            "tsConfig": "lib/extensions/tsconfig.spec.json",
+            "main": "lib/insights/src/test.ts",
+            "tsConfig": "lib/insights/tsconfig.spec.json",
             "karmaConfig": "lib/insights/karma.conf.js",
             "codeCoverage": true,
             "sourceMap": true
@@ -758,7 +758,7 @@
           "options": {
             "tsConfig": [
               "lib/insights/tsconfig.lib.json",
-              "lib/insights/tsconfig.lib.json"
+              "lib/insights/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"

cspell.json

@@ -129,7 +129,9 @@
     "processwithvariables",
     "dropdownrestprocess",
     "devops",
-    "mouseenter"
+    "mouseenter",
+    "starteventform",
+    "formtotestvalidations"
   ],
   "dictionaries": [
     "html",

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

@@ -1,4 +1,4 @@
-<div class="adf-demo-app-container">
+<div class="app-demo-app-container">
     <router-outlet></router-outlet>
     <router-outlet name="overlay"></router-outlet>
 </div>

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

@@ -7,7 +7,7 @@ router-outlet[name='overlay'] + * {
     right: 0;
 }
 
-.adf-demo-app-container {
+.app-demo-app-container {
     height: 100%;
     width: 100%;
 }

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

@@ -413,19 +413,30 @@ export const appRoutes: Routes = [
                 canActivate: [AuthGuardBpm],
                 loadChildren: 'app/components/process-list-demo/process-list.module#AppProcessListModule'
             },
-            {
-                path: 'error/:id',
-                component: DemoErrorComponent
-            },
             {
                 path: 'error/no-authorization',
                 component: ErrorContentComponent
-            },
-            {
-                path: '**',
-                redirectTo: 'error/404'
             }
         ]
+    },
+    {
+        path: 'error',
+        component: AppLayoutComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: '/error/404',
+                pathMatch: 'full'
+            },
+            {
+                path: ':id',
+                component: DemoErrorComponent
+            }
+        ]
+    },
+    {
+        path: '**',
+        redirectTo: 'error/404'
     }
 ];
 

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

@@ -5,14 +5,14 @@
         <ng-template let-toggleMenu="toggleMenu">
 
             <adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo"
-                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" [position]="position"
-                (clicked)=toggleMenu($event)>
+                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="expandedSidenav"
+                [color]="color" [position]="position" (clicked)=toggleMenu($event)>
 
-                <div class="adf-app-layout-menu-spacer"></div>
+                <div class="app-layout-menu-spacer"></div>
 
                 <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-                <div class="adf-header-delimiexpandedSidenavter"></div>
+                <div class="app-header-delimiexpandedSidenavter"></div>
 
                 <adf-userinfo [menuPositionX]="'before'" [menuPositionY]="'above'">
                 </adf-userinfo>
@@ -21,7 +21,7 @@
                 <button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
                     <mat-icon>language</mat-icon>
                 </button>
-                <mat-menu #langMenu="matMenu" class="adf-menu">
+                <mat-menu #langMenu="matMenu" class="app-menu">
                     <adf-language-menu></adf-language-menu>
                 </mat-menu>
 
@@ -33,13 +33,13 @@
 
     <adf-sidenav-layout-navigation>
         <ng-template let-isMenuMinimized="isMenuMinimized">
-            <mat-nav-list class="adf-sidenav-linklist">
+            <mat-nav-list class="app-sidenav-linklist">
                 <ng-container *ngFor="let link of links">
                     <ng-container *ngIf="link.children">
-                        <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
+                        <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
                             <mat-icon matListIcon>{{link.icon}}</mat-icon>
                             <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
-                            <mat-icon class="adf-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
+                            <mat-icon class="app-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
                                 rippleTrigger mat-icon-button #trigger="matMenuTrigger"
                                 [matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
                         </mat-list-item>
@@ -47,15 +47,15 @@
 
                     <ng-container *ngIf="!link.children">
                         <mat-list-item [routerLink]="link.href"
-                            routerLinkActive="adf-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
-                            [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
+                            routerLinkActive="app-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
+                            [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
                             <mat-icon matListIcon >{{link.icon}}</mat-icon>
                             <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
                         </mat-list-item>
                     </ng-container>
                 </ng-container>
 
-                <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="adf-sidenav-link" data-automation-id="Logout" >
+                <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="app-sidenav-link" data-automation-id="Logout" >
                     <mat-icon matListIcon>exit_to_app</mat-icon>
                     <span matLine *ngIf="!isMenuMinimized()">Logout</span>
                 </mat-list-item>
@@ -76,9 +76,9 @@
 <mat-menu #nestedMenu="matMenu" xPosition="after" class="nestedMenu">
     <ng-template matMenuContent let-links="links">
         <button mat-menu-item *ngFor="let link of links"
-            class="adf-sidenav-link"
+            class="app-sidenav-link"
             [attr.data-automation-id]="link.title | translate"
-            routerLinkActive="adf-sidenav-link--active"
+            routerLinkActive="app-sidenav-link--active"
             [routerLink]="link.href"
             [routerLinkActiveOptions]="{ exact: true }">
 

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

@@ -1,4 +1,4 @@
-@mixin adf-app-layout-theme($theme) {
+@mixin app-layout-theme($theme) {
     $primary: map-get($theme, primary);
     $minimumAppWidth: 320px;
 
@@ -14,17 +14,17 @@
         }
     }
 
-    .adf-app-layout {
+    .app-layout {
         display: flex;
         flex: 1;
         min-width: $minimumAppWidth;
         height: 100%;
 
-        .adf-sidenav-link--active {
+        .app-sidenav-link--active {
             color: mat-color($primary);
         }
 
-        .adf-sidenav-link {
+        .app-sidenav-link {
             .mat-list-text {
                 font-size: 14px;
                 white-space: nowrap;
@@ -33,7 +33,7 @@
             }
         }
 
-        .mat-nav-list .mat-list-item.adf-sidenav-link {
+        .mat-nav-list .mat-list-item.app-sidenav-link {
             height: 40px;
         }
 
@@ -47,7 +47,7 @@
             display: none;
         }
 
-        .adf-menu {
+        .app-menu {
             padding-top: 0;
         }
     }
@@ -63,7 +63,7 @@
         }
     }
 
-    [dir='rtl'] .adf-sidenav-link__expand-button {
+    [dir='rtl'] .app-sidenav-link__expand-button {
         transform: rotateY(180deg);
     }
 }

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

@@ -25,7 +25,7 @@ import { takeUntil } from 'rxjs/operators';
     templateUrl: 'app-layout.component.html',
     styleUrls: ['app-layout.component.scss'],
     host: {
-        'class': 'adf-app-layout'
+        'class': 'app-layout'
     },
     encapsulation: ViewEncapsulation.None
 })

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

@@ -2,7 +2,7 @@
 
     <mat-tab-group>
         <mat-tab label="Form" class="form-cloud-render">
-            <div class="adf-form-container">
+            <div class="app-form-container">
                 <adf-cloud-form
                     [showRefreshButton]="false"
                     [form]="form"
@@ -11,7 +11,7 @@
                 </adf-cloud-form>
             </div>
 
-            <div class="adf-console" #console>
+            <div class="app-console" #console>
                 <h3>Error log:</h3>
                 <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
                     translate}}</p>
@@ -20,20 +20,20 @@
         <mat-tab label="Editor" class="form-cloud-editor">
             <ngx-monaco-editor
                 id="adf-form-config-editor"
-                class="adf-form-config-editor"
+                class="app-form-config-editor"
                 [options]="editorOptions"
                 [(ngModel)]="formConfig"
                 (onInit)="onInitFormEditor($event)">
             </ngx-monaco-editor>
-            <div class="adf-form-editor-buttons">
-                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
+            <div class="app-form-editor-buttons">
+                <button mat-raised-button id="app-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
                     form config
                 </button>
-                <button mat-raised-button id="adf-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
+                <button mat-raised-button id="app-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
                     form config
                 </button>
             </div>
-            <div class="adf-upload-config-button">
+            <div class="app-upload-config-button">
                 <a mat-raised-button color="primary" >
                     <mat-icon>file_upload</mat-icon>
                     <label for="upload-config-file">Upload JSON File</label>

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

@@ -1,17 +1,17 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;
@@ -31,16 +31,16 @@
     }
 }
 
-.adf-form-config-editor {
+.app-form-config-editor {
     height: 500px !important;
 }
 
-.adf-form-editor-buttons {
+.app-form-editor-buttons {
     display: flex;
     justify-content: space-evenly;
 }
 
-.adf-upload-config-button {
+.app-upload-config-button {
     display: flex;
     justify-content: center;
 

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

@@ -8,7 +8,7 @@
     <h2>1. Standalone (fixed size)</h2>
     <small>Component is used in the fixed-width layout</small>
 
-    <div class="adf-breadcrumb-container-restricted">
+    <div class="app-breadcrumb-container-restricted">
         <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
         </adf-breadcrumb>
     </div>
@@ -57,7 +57,7 @@
         Buttons do nothing and are present for layout purposes.
     </small>
 
-    <adf-toolbar class="adf-full-content-toolbar">
+    <adf-toolbar class="app-full-content-toolbar">
         <adf-toolbar-title fxFlex="0 1 auto">
             <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
             </adf-breadcrumb>
@@ -79,11 +79,11 @@
     <h2>6. Dropdown Breadcrumb</h2>
 
     <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                             class="adf-files-breadcrumb"
+                             class="app-files-breadcrumb"
                              [target]="documentList">
     </adf-dropdown-breadcrumb>
 
-    <div class="adf-content">
+    <div class="app-content">
         <adf-document-list #documentList currentFolderId="-my-">
         </adf-document-list>
     </div>

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

@@ -1,13 +1,13 @@
-.adf-breadcrumb-container-restricted {
+.app-breadcrumb-container-restricted {
     width: 800px;
     max-width: 800px;
     border: 1px solid lightgray;
 }
 
-.adf-content {
+.app-content {
     margin: 10px 0;
 }
 
-.adf-full-content-toolbar .adf-toolbar-title .adf-breadcrumb {
+.app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
     width: 0;
 }

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

@@ -1,7 +1,7 @@
-<div class="adf-main-content">
+<div class="app-main-content">
     <h1>CardView Component</h1>
 
-    <mat-card class="adf-card-view">
+    <mat-card class="app-card-view">
         <adf-card-view
             [properties]="properties"
             [editable]="true"
@@ -10,30 +10,30 @@
         </adf-card-view>
     </mat-card>
 
-    <div class="adf-console" #console>
+    <div class="app-console" #console>
         <h3>Changes log:</h3>
         <p *ngFor="let log of logs">{{ log }}</p>
     </div>
 
 </div>
 
-<p class="adf-toggle">
+<p class="app-toggle">
     <mat-slide-toggle
-        id="adf-toggle-editable"
+        id="app-toggle-editable"
         [color]="'primary'"
         (change)="toggleEditable()"
         [checked]="isEditable">
         Editable
     </mat-slide-toggle><br>
     <mat-slide-toggle
-        id="adf-toggle-clear-date"
+        id="app-toggle-clear-date"
         [color]="'primary'"
         (change)="toggleClearDate()"
         [checked]="showClearDateAction">
         Show clear date icon
     </mat-slide-toggle><br>
     <mat-slide-toggle
-        id="adf-toggle-none-option"
+        id="app-toggle-none-option"
         [color]="'primary'"
         (change)="toggleNoneOption()"
         [checked]="showNoneOption">

demo-shell/src/app/components/card-view/card-view.component.scss

@@ -1,13 +1,13 @@
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;

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

@@ -28,7 +28,8 @@ import {
     CardViewUpdateService,
     CardViewMapItemModel,
     UpdateNotification,
-    DecimalNumberPipe
+    DecimalNumberPipe,
+    CardViewArrayItemModel
 } from '@alfresco/adf-core';
 import { of, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -148,6 +149,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
                 clickCallBack: () => {
                     this.respondToCardClick();
                 }
+            }),
+            new CardViewArrayItemModel({
+                label: 'CardView Array of items',
+                value: of(['Zlatan', 'Lionel Messi', 'Mohamed', 'Ronaldo']),
+                key: 'array',
+                icon: 'directions_bike',
+                default: 'Empty',
+                noOfItemsToDisplay: 2
             })
         ];
     }

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html

@@ -1,8 +1,8 @@
 <adf-toolbar>
   <div fxLayout="column" fxLayoutAlign="center">
     <div fxLayout="row">
-      <div class="adf-app-crumb">{{appName + ' >'}} </div>
-      <div class="adf-filter-crumb"> {{filterName | translate}}</div>
+      <div class="app-crumb">{{appName + ' >'}} </div>
+      <div class="app-filter-crumb"> {{filterName | translate}}</div>
     </div>
   </div>
 </adf-toolbar>

demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss

@@ -1,8 +1,8 @@
-.adf-app-crumb {
+.app-app-crumb {
   opacity: 0.5;
 }
 
-.adf-filter-crumb {
+.app-filter-crumb {
   opacity: 0.8;
   margin-left: 5px;
 }

demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss

@@ -1,3 +1,3 @@
-adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
+app-cloud-task-filters .app-filters__entry, app-cloud-process-filters .app-filters__entry {
   padding-left: 0 !important;
 }

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

@@ -1,4 +1,4 @@
-<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+<mat-tab-group fxFill class="app-cloud-layout-tab-body">
   <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
     <div fxFill fxLayout>
       <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">

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

@@ -1,7 +1,7 @@
-.adf-cloud-layout-overflow {
+.app-cloud-layout-overflow {
   overflow: auto;
 }
 
-.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+.app-cloud-layout-tab-body .mat-tab-body-wrapper {
   height: 100%;
 }

demo-shell/src/app/components/cloud/community/community-cloud.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+<mat-tab-group fxFill class="app-cloud-layout-tab-body">
     <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
       <div fxFill fxLayout>
         <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">

demo-shell/src/app/components/cloud/community/community-cloud.component.ts

@@ -21,11 +21,11 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 
 @Component({
     templateUrl: './community-cloud.component.html',
-    styles: [`.adf-cloud-layout-overflow {
+    styles: [`.app-cloud-layout-overflow {
         overflow: auto;
       }
 
-      .adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+      .app-cloud-layout-tab-body .mat-tab-body-wrapper {
         height: 100% !important;
       }
       `],

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html

@@ -5,11 +5,11 @@
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<div class="adf-process-cloud-container">
+<div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
-        class="adf-cloud-layout-overflow"
+        class="app-cloud-layout-overflow"
         [appName]="''"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
@@ -17,7 +17,7 @@
     </adf-cloud-task-list>
 
     <adf-cloud-process-header
-        class="adf-process-cloud-header"
+        class="app-process-cloud-header"
         [appName]="''"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>

demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss

@@ -1,4 +1,4 @@
-.adf {
+.app {
     &-process-cloud-container {
         display: flex;
     }

demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html

@@ -12,7 +12,7 @@
         <adf-cloud-process-list #processCloud
             fxFlex
             [appName]="''"
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processDefinitionKey]="editedFilter.processDefinitionKey"

demo-shell/src/app/components/cloud/community/community-task-cloud.component.html

@@ -12,7 +12,7 @@
         <adf-cloud-task-list #taskCloud
             fxFlex
             [appName]="''"
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"
             [name]="editedFilter.taskName"

demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss

@@ -1,5 +1,5 @@
 
-.adf {
+.app {
 
     &-task-detail-container {
         display: flex;

demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html

@@ -1,4 +1,4 @@
-<mat-card class="adf-section">
+<mat-card class="app-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
     </mat-card-title>
@@ -6,31 +6,31 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangePeopleMode($event)">
-            <mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
+            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="{{ peopleSingleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-            <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
+            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
-        <div class="people-control-options">
+        <div class="app-people-control-options">
             <mat-radio-group (change)="onChangePeopleFilterMode($event)">
-                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-filter-role" value="role">{{
+                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
             </mat-radio-group>
-            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setPeopleRoles($event)" data-automation-id="adf-people-roles-input" />
+                <input matInput (input)="setPeopleRoles($event)" data-automation-id="app-people-roles-input" />
             </mat-form-field>
-            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setPeopleAppName($event)" data-automation-id="adf-people-app-input" />
+                <input matInput (input)="setPeopleAppName($event)" data-automation-id="app-people-app-input" />
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value-full">
+            <mat-form-field class="app-preselect-value-full">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="adf-people-preselect-input" />
+                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="app-people-preselect-input" />
             </mat-form-field>
-            <mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
+            <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
         </div>
         <div>
@@ -44,7 +44,7 @@
                 [mode]="peopleMode"></adf-cloud-people>
         </div>
 
-        <div class="adf-people-list" *ngIf="canShowPeopleList()">
+        <div class="app-people-list" *ngIf="canShowPeopleList()">
             <mat-list role="list">
                 <mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
                     <mat-icon mat-list-icon>person</mat-icon>
@@ -55,7 +55,7 @@
     </mat-card-content>
 </mat-card>
 
-<mat-card class="adf-section">
+<mat-card class="app-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
     </mat-card-title>
@@ -63,29 +63,29 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangeGroupsMode($event)">
-            <mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-group-single-mode" value="{{ groupSingleMode }}">{{
+            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="{{ groupSingleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-            <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-multiple-mode" value="{{ groupMultipleMode }}">{{
+            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="{{ groupMultipleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
-        <div class="groups-control-options">
+        <div class="app-groups-control-options">
             <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
-                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-filter-role" value="role">{{
+                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
             </mat-radio-group>
-            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setGroupRoles($event)" data-automation-id="adf-group-roles-input"/>
+                <input matInput (input)="setGroupRoles($event)" data-automation-id="app-group-roles-input"/>
             </mat-form-field>
-            <mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setGroupAppName($event)" data-automation-id="adf-group-app-input"/>
+                <input matInput (input)="setGroupAppName($event)" data-automation-id="app-group-app-input"/>
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value-full">
+            <mat-form-field class="app-preselect-value-full">
                 <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="adf-group-preselect-input" />
+                <input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="app-group-preselect-input" />
             </mat-form-field>
         </div>
         <div>
@@ -93,7 +93,7 @@
                 (selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
         </div>
 
-        <div class="adf-group-list" *ngIf="canShowGroupList()">
+        <div class="app-group-list" *ngIf="canShowGroupList()">
             <mat-list role="list">
                 <mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
                     <mat-icon mat-list-icon>group</mat-icon>

demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.scss

@@ -1,4 +1,4 @@
-.adf {
+.app {
     &-section {
         mat-card-title {
             font-size:18px;
@@ -14,7 +14,7 @@
 
         mat-card-content {
 
-            .adf-preselect-value {
+            .app-preselect-value {
                 margin-right: 15px;
                 min-width: 25%;
 

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html

@@ -5,11 +5,11 @@
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<div class="adf-process-cloud-container">
+<div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
-        class="adf-cloud-layout-overflow"
+        class="app-cloud-layout-overflow"
         [appName]="appName"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
@@ -17,7 +17,7 @@
     </adf-cloud-task-list>
 
     <adf-cloud-process-header
-        class="adf-process-cloud-header"
+        class="app-process-cloud-header"
         [appName]="appName"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>

demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss

@@ -1,4 +1,4 @@
- .adf {
+ .app {
     &-process-cloud-container {
         display: flex;
     }

demo-shell/src/app/components/cloud/processes-cloud-demo.component.html

@@ -11,7 +11,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-process-list #processCloud
             fxFlex
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"

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

@@ -1,4 +1,4 @@
-<div fxFlex fxLayout="column" class="adf-settings-container">
+<div fxFlex fxLayout="column" class="app-settings-container">
     <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
         {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
     </mat-slide-toggle>

demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss

@@ -1,7 +1,7 @@
-.adf-settings-container {
+.app-settings-container {
     padding: 20px 30px;
 }
 
-.adf-settings-container mat-form-field {
+.app-settings-container mat-form-field {
     max-width: 200px;
 }

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

@@ -69,13 +69,13 @@ export class CloudSettingsComponent implements OnInit, OnDestroy {
     setCurrentSettings(settings) {
         if (settings) {
             this.multiselect = settings.multiselect;
-            this.actionMenu = this.actionMenu;
-            this.contextMenu = this.contextMenu;
-            this.actions = this.actions;
             this.testingMode = settings.testingMode;
             this.selectionMode = settings.selectionMode;
             this.taskDetailsRedirection = settings.taskDetailsRedirection;
             this.processDetailsRedirection = settings.processDetailsRedirection;
+            this.actionMenu = settings.actionMenu;
+            this.contextMenu = settings.contextMenu;
+            this.actions = settings.actions;
         }
     }
 

demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss

@@ -1,5 +1,5 @@
 
-.adf {
+.app {
 
     &-task-detail-container {
         display: flex;

demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html

@@ -11,7 +11,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-task-list #taskCloud
             fxFlex
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"

demo-shell/src/app/components/config-editor/config-editor.component.html

@@ -1,5 +1,5 @@
 <div>
-    <mat-nav-list class="adf-list-confgurations">
+    <mat-nav-list class="app-list-confgurations">
 
         <mat-list-item  (click)="appConfigClick()">
             <a matLine id="adf-app-conf">App Config Editor</a>
@@ -32,12 +32,12 @@
 
     <div>
         <ngx-monaco-editor id="adf-code-configuration-editor"
-                           class="adf-file-editor"
+                           class="app-file-editor"
                            [options]="editorOptions"
                            [(ngModel)]="code"
                            (onInit)="onInit($event)">
         </ngx-monaco-editor>
-        <div class="adf-list-confgurations-buttons">
+        <div class="app-list-confgurations-buttons">
             <button mat-raised-button id="adf-configuration-save" (click)="onSave()" color="primary">
                 Save
             </button>

demo-shell/src/app/components/config-editor/config-editor.component.scss

@@ -1,15 +1,15 @@
-.adf-file-editor {
+.app-file-editor {
     height: 500px;
     width: 65%;
     float: left;
 }
 
-.adf-list-confgurations {
+.app-list-configurations {
     float: left;
     width: 30%;
 }
 
-.adf-list-confgurations-buttons {
+.app-list-configurations-buttons {
     width: 200px;
     margin-left:  30%;
     float: left;

demo-shell/src/app/components/content-node-selector/content-node-selector.component.html

@@ -8,13 +8,13 @@
                     <h2>Plain picker</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         dropdownHideMyFiles: {{dropdownHideMyFiles}}
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
 
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'">
                 </adf-content-node-selector-panel>
@@ -26,13 +26,13 @@
                     <h2>Hide My files</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         My Files site will be hided from dropdown
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
 
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'"
                     [dropdownHideMyFiles]="true">
@@ -45,7 +45,7 @@
                     <h2>Custom Site List</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Adding a custom site list
                     </label>
                 </mat-panel-description>
@@ -54,7 +54,7 @@
             <div>
                 <mat-list>
                     <h3 mat-subheader>Add Site</h3>
-                    <form class="adf-content-node-selector-demo-example-form">
+                    <form class="app-content-node-selector-demo-example-form">
                         <mat-form-field>
                             <label>Site Guid</label>
                             <input matInput [(ngModel)]="customSideGuid" [ngModelOptions]="{standalone: true}">
@@ -79,7 +79,7 @@
             </div>
 
 
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'"
                     [dropdownSiteList]="customSites">
@@ -92,7 +92,7 @@
                         <h2>Row Filtering</h2>
                     </mat-panel-title>
                     <mat-panel-description>
-                        <label class="adf-content-node-selector-demo-basic-label">
+                        <label class="app-content-node-selector-demo-basic-label">
                             Will automatically filter the row on the list
                         </label>
                     </mat-panel-description>
@@ -105,7 +105,7 @@
                     Slide Folders
                 </mat-slide-toggle>
 
-                <div class="adf-content-node-selector-demo-basic-table">
+                <div class="app-content-node-selector-demo-basic-table">
                     <adf-content-node-selector-panel
                         [rowFilter]="rowFilterFunction"
                         [currentFolderId]="'-root-'">
@@ -118,7 +118,7 @@
                         <h2>Exclude Site Content</h2>
                     </mat-panel-title>
                     <mat-panel-description>
-                        <label class="adf-content-node-selector-demo-basic-label">
+                        <label class="app-content-node-selector-demo-basic-label">
                             The exclude site content is filtered out from the list
                         </label>
                     </mat-panel-description>
@@ -137,7 +137,7 @@
                     Show Folders
                 </mat-slide-toggle>
 
-                <div class="adf-content-node-selector-demo-basic-table">
+                <div class="app-content-node-selector-demo-basic-table">
                     <adf-content-node-selector-panel
                         [rowFilter]="rowFilterFunction"
                         [excludeSiteContent]="excludeSiteContentList"
@@ -151,7 +151,7 @@
                         <h2>Custom Image Resolving</h2>
                     </mat-panel-title>
                     <mat-panel-description>
-                        <label class="adf-content-node-selector-demo-basic-label">
+                        <label class="app-content-node-selector-demo-basic-label">
                             A function to manage the way folder/file icons and thumbnails are resolved
                         </label>
                     </mat-panel-description>
@@ -161,7 +161,7 @@
                     Add Custom Images Resolver
                 </mat-slide-toggle>
 
-                <div class="adf-content-node-selector-demo-basic-table">
+                <div class="app-content-node-selector-demo-basic-table">
                     <adf-content-node-selector-panel
                         [imageResolver]="customImageResolver"
                         [currentFolderId]="'-root-'">
@@ -174,12 +174,12 @@
                     <h2>Set Page Size</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Number of items shown per page in the list. actual page {{actualPageSize}}
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'"
                     [pageSize]="actualPageSize"
@@ -193,14 +193,14 @@
                     <h2>Is Valid Selection Function </h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Function used to decide if the selected node has permission to be selected
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <label>Only folder starting with the letter 'a' or 'A' are valid selections</label>
             <label>Actual Selection is : {{validSelection}}</label>
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     (select)="onNodeSelect($event)"
                     [isSelectionValid]="customIsValidFunction"
@@ -214,13 +214,13 @@
                     <h2>BreadCrumb Transform Function </h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Transformation to be performed on the chosen/folder node before building the breadcrumb UI
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <label>Folder starting with letter 'd' or 'D' won't be displayed in the breadcrumb dropdown</label>
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [breadcrumbTransform]="customBreadcrumbFunction"
                     [currentFolderId]="'-root-'">

demo-shell/src/app/components/content-node-selector/content-node-selector.component.scss

@@ -1,4 +1,4 @@
-.adf-content-node-selector-demo {
+.app-content-node-selector-demo {
 
     &-main {
         display: flex;

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

@@ -16,7 +16,7 @@
         [data]="dataForCopy">
         <data-columns>
             <data-column key="id" title="Id" [copyContent]="true"></data-column>
-            <data-column key="name" title="Name" class="adf-full-width name-column" [copyContent]="false"></data-column>
+            <data-column key="name" title="Name" class="app-full-width name-column" [copyContent]="false"></data-column>
             <data-column key="createdBy" title="Created By"></data-column>
             <data-column key="json" type="json" title="Json" [copyContent]="true"></data-column>
         </data-columns>

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

@@ -18,6 +18,7 @@
         [selectionMode]="selectionMode"
         [multiselect]="multiselect"
         [actions]="true"
+        [resolverFn]="resolver"
         rowStyleClass="custom-row-style"
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
         (executeRowAction)="onExecuteRowAction($event)">
@@ -28,7 +29,11 @@
             <data-column key="id" title="Id"></data-column>
             <data-column key="createdOn" title="Created"></data-column>
             <data-column key="name" title="Name" class="adf-full-width name-column"></data-column>
-            <data-column key="createdBy.name" title="Created By"></data-column>
+            <data-column type="text" key="createdBy.name" title="Created By"></data-column>
+            <data-column type="text" key="users" title="Users"></data-column>
+            <data-column key="status" title="Status">
+                <ng-template let-value="value">{{value | json }}</ng-template>
+            </data-column>
         </data-columns>
         -->
     </adf-datatable>

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

@@ -16,8 +16,16 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { DataColumn, DataRow } from '@alfresco/adf-core';
-import { DataCellEvent, DataRowActionEvent, DataSorting, ObjectDataColumn, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core';
+import {
+    DataCellEvent,
+    DataColumn,
+    DataRow,
+    DataRowActionEvent,
+    DataSorting,
+    ObjectDataColumn,
+    ObjectDataRow,
+    ObjectDataTableAdapter
+} from '@alfresco/adf-core';
 
 export class FilteredDataAdapter extends ObjectDataTableAdapter {
 
@@ -75,6 +83,20 @@ export class DataTableComponent {
         this.reset();
     }
 
+    resolver(row: DataRow, col: DataColumn): any {
+        const value = row.getValue(col.key);
+        if (col.key === 'users') {
+            return (value || []).map(user => `${user.firstName} ${user.lastName}`).toString();
+        }
+
+        if (col.key === 'status') {
+            const users = row.getValue('users');
+            return (value || []).map((status, index) => ({ 'name': `${users[index].firstName} ${users[index].lastName}`, status }));
+        }
+
+        return value;
+    }
+
     /* spellchecker: disable */
     reset() {
         this.data = new FilteredDataAdapter(
@@ -90,7 +112,21 @@ export class DataTableComponent {
                     createdOn: new Date(2016, 6, 2, 15, 8, 1),
                     createdBy: this._createdBy,
                     icon: 'material-icons://folder_open',
-                    json: null
+                    json: null,
+                    users: [
+                        {
+                            firstName: 'Super',
+                            lastName: 'Man'
+                        },
+                        {
+                            firstName: 'Iron',
+                            lastName: 'Man'
+                        }
+                    ],
+                    status: [
+                        'I am here to save the world.. By world means AMERICA',
+                        'That nobody is John Wick…'
+                    ]
                 },
                 {
                     id: 2,
@@ -98,7 +134,21 @@ export class DataTableComponent {
                     createdOn: new Date(2016, 6, 2, 15, 8, 2),
                     createdBy: this._createdBy,
                     icon: 'material-icons://accessibility',
-                    json: null
+                    json: null,
+                    users: [
+                        {
+                            firstName: 'Mister',
+                            lastName: 'Bean'
+                        },
+                        {
+                            firstName: 'Doctor',
+                            lastName: 'Strange'
+                        }
+                    ],
+                    status: [
+                        'I am here to save the world.. By world means AMERICA',
+                        'That nobody is John Wick…'
+                    ]
                 },
                 {
                     id: 3,
@@ -106,7 +156,21 @@ export class DataTableComponent {
                     createdOn: new Date(2016, 6, 2, 15, 8, 3),
                     createdBy: this._createdBy,
                     icon: 'material-icons://alarm',
-                    json: null
+                    json: null,
+                    users: [
+                        {
+                            firstName: 'Thunder',
+                            lastName: 'Thor'
+                        },
+                        {
+                            firstName: 'Marvel',
+                            lastName: 'Avenger'
+                        }
+                    ],
+                    status: [
+                        'I am here to save the world.. By world means AMERICA',
+                        'That nobody is John Wick…'
+                    ]
                 },
                 {
                     id: 4,
@@ -120,10 +184,45 @@ export class DataTableComponent {
                         createdOn: new Date(2016, 6, 2, 15, 8, 4),
                         createdBy: {
                             name: 'Felipe',
-                            lastname: 'Melo'
+                            lastName: 'Melo'
                         },
                         icon: 'material-icons://alarm'
-                    }
+                    },
+                    users: [
+                        {
+                            firstName: 'Spider',
+                            lastName: 'Man'
+                        },
+                        {
+                            firstName: '17',
+                            lastName: 'Again'
+                        }
+                    ],
+                    status: [
+                        'I am here to save the world.. By world means AMERICA',
+                        'That nobody is John Wick…'
+                    ]
+                },
+                {
+                    id: 5,
+                    name: 'I am using custom resolver',
+                    createdOn: new Date(2016, 6, 2, 15, 8, 4),
+                    createdBy: this._createdBy,
+                    icon: 'material-icons://person_outline',
+                    users: [
+                        {
+                            firstName: 'Captain',
+                            lastName: 'America'
+                        },
+                        {
+                            firstName: 'John',
+                            lastName: 'Wick'
+                        }
+                    ],
+                    status: [
+                        'I am here to save the world.. By world means AMERICA',
+                        'That nobody is John Wick…'
+                    ]
                 }
             ],
             [
@@ -132,7 +231,9 @@ export class DataTableComponent {
                 { type: 'date', key: 'createdOn', title: 'Created On', sortable: true, cssClass: 'adf-ellipsis-cell adf-expand-cell-2' },
                 { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-ellipsis-cell', sortable: true },
                 { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''},
-                { type: 'json', key: 'json', title: 'Json', cssClass: 'adf-expand-cell-2'}
+                { type: 'json', key: 'json', title: 'Json', cssClass: 'adf-expand-cell-2'},
+                { type: 'text', key: 'users', title: 'Users', cssClass: 'adf-expand-cell-2'},
+                { type: 'json', key: 'status', title: 'Status', cssClass: 'adf-expand-cell-2'}
             ]
         );
 

demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts

@@ -33,7 +33,7 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'app-name-column',
     template: `
-        <span class="adf-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
+        <span class="app-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
             {{ displayText$ | async }}
         </span>
     `,

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

@@ -1,9 +1,9 @@
 <div fxLayout="column" fxLayoutAlign="center center">
     <adf-error-content [errorCode]="errorCode">
-        <div adf-error-content-actions class="adf-error-content-buttons">
+        <div adf-error-content-actions class="app-error-content-buttons">
             <a a id="adf-secondary-button" mat-raised-button color="primary"
                  (click)="onReportIssue()"
-                class="adf-error-content-description-link">
+                class="app-error-content-description-link">
                 {{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
             </a>
             <a id="adf-return-button" mat-raised-button color="primary" (click)="onReturnButton()">

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

@@ -1,4 +1,4 @@
-.adf-error-content {
+.app-error-content {
 
     &-buttons {
         display: flex;

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

@@ -1,4 +1,4 @@
-.adf-viewer__sidebar {
+.app-viewer__sidebar {
     width: 380px !important;
 }
 
@@ -7,6 +7,6 @@
     width: 600px;
 }
 
-adf-preview-extension {
+app-preview-extension {
     width: 600px;
 }

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

@@ -1,6 +1,6 @@
-<div class="adf-container">
+<div class="app-container">
 
-    <mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
+    <mat-accordion *ngIf="showRecentFiles" class="app-container-recent">
         <mat-expansion-panel hideToggle="true">
             <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -18,21 +18,21 @@
                 (preview)="showFile($event)"
                 selectionMode="null">
                 <adf-custom-empty-content-template>
-                    <div class="adf-empty-list__block">
+                    <div class="app-empty-list__block">
                         <mat-icon>history</mat-icon>
-                        <p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                        <p class="app-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
                     </div>
                 </adf-custom-empty-content-template>
             </adf-document-list>
         </mat-expansion-panel>
     </mat-accordion>
 
-    <div *ngIf="showSitePicker" class="adf-site-container-style" id="site-container">
+    <div *ngIf="showSitePicker" class="app-site-container-style" id="site-container">
         <adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
         </adf-sites-dropdown>
     </div>
 
-    <div id="document-list-container" class="adf-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
+    <div id="document-list-container" class="app-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
          fxLayoutGap="16px">
         <adf-upload-drag-area fxFlex="1 1 auto"
                               [disabled]="disableDragArea"
@@ -42,28 +42,28 @@
                               [adf-check-allowable-operation]="'create'"
                               [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
                               (beginUpload)="onBeginUpload($event)">
-            <div *ngIf="errorMessage" class="adf-error-message">
+            <div *ngIf="errorMessage" class="app-error-message">
                 <button (click)="resetError()" mat-icon-button>
                     <mat-icon>highlight_off</mat-icon>
                 </button>
-                <span class="adf-error-message--text">{{errorMessage}}</span>
+                <span class="app-error-message--text">{{errorMessage}}</span>
             </div>
-            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
+            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
                 <adf-toolbar-title  fxFlex="0 1 auto">
                     <adf-breadcrumb fxShow fxHide.lt-sm="true"
-                                    class="adf-files-breadcrumb"
+                                    class="app-files-breadcrumb"
                                     root="APP.PERSONAL-FILES"
                                     [target]="documentList">
                     </adf-breadcrumb>
                     <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                                             class="adf-files-breadcrumb"
+                                             class="app-files-breadcrumb"
                                              [target]="documentList">
                     </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">
+                <div fxFlex="0 0 auto" class="app-document-action-buttons" fxShow fxHide.lt-sm="true">
                     <button
                         mat-icon-button
                         data-automation-id="document-list-grid-view"
@@ -158,7 +158,7 @@
                     <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
                 </mat-menu>
 
-                <button mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
+                <button mat-icon-button (click)="showVersions = !showVersions" class="app-show-versions-button">
                     <mat-icon *ngIf="!showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHOW_VERSION' | translate }}">
                         chevron_left
                     </mat-icon>
@@ -215,10 +215,10 @@
                 </mat-menu>
             </adf-toolbar>
 
-            <div class="adf-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
+            <div class="app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
                 <adf-document-list
                 #documentList
-                class="adf-file-list-container"
+                class="app-file-list-container"
                 [permissionsStyle]="permissionsStyle"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
@@ -245,8 +245,8 @@
                     <h1>You don't have permissions</h1>
                 </adf-custom-no-permission-template>
                 <adf-custom-empty-content-template *ngIf="disableDragArea">
-                    <div class="adf-empty_template">
-                        <div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
+                    <div class="app-empty_template">
+                        <div class="app-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
                     </div>
                 </adf-custom-empty-content-template>
                 <data-columns>
@@ -254,13 +254,13 @@
                         key="$thumbnail"
                         type="image"
                         [sortable]="false"
-                        class="adf-image-table-cell"
+                        class="app-image-table-cell"
                         [class.adf-cell-thumbnail]="thumbnails">
                     </data-column>
                     <data-column
                         *ngIf="showNameColumn && hyperlinkNavigation"
                         key="name"
-                        class="adf-ellipsis-cell"
+                        class="app-ellipsis-cell"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip">
                         <ng-template let-context>
@@ -272,7 +272,7 @@
                         key="name"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip"
-                        class="adf-ellipsis-cell adf-expand-cell-5">
+                        class="app-ellipsis-cell adf-expand-cell-5">
                     </data-column>
                     <!-- Location column demo -->
                     <!--
@@ -287,13 +287,13 @@
                         key="content.sizeInBytes"
                         title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                         type="fileSize"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         *ngIf="searchTerm"
                         key="search"
                         title="Search"
-                        class="adf-desktop-only adf-expand-cell-3">
+                        class="app-desktop-only adf-expand-cell-3">
                         <ng-template let-entry="$implicit">
                             <div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
                             </div>
@@ -304,23 +304,23 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                         key="id"
-                        class="adf-full-width adf-ellipsis-cell">
+                        class="app-full-width adf-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
-                        class="adf-full-width adf-ellipsis-cell adf-desktop-only"
+                        class="app-full-width adf-ellipsis-cell adf-desktop-only"
                         title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
                         key="id">
                     </data-column>
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                         key="id"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                         <ng-template let-entry="$implicit">
-                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
+                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="app-lock-button">
                                 <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
                                 <mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
                             </button>
@@ -329,14 +329,14 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                         key="createdByUser.displayName"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                         key="createdAt"
                         type="date"
                         [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                     </data-column>
 
                 </data-columns>
@@ -433,7 +433,7 @@
             <adf-pagination
                 #standardPagination
                 *ngIf="!infiniteScrolling"
-                class="adf-documentlist-pagination"
+                class="app-documentlist-pagination"
                 [target]="documentList"
                 (changePageSize)="onChangePageSize($event)"
                 (changePageNumber)="onChangePageNumber($event)"
@@ -448,7 +448,7 @@
             </adf-infinite-pagination>
         </adf-upload-drag-area>
 
-        <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
+        <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar" fxFlex="0 0 auto">
             <div info-drawer-content>
 
                 <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
@@ -469,14 +469,14 @@
                             </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>
+                            <div class="app-manage-versions-empty">
+                                <mat-icon class="app-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>
+                            <div class="app-manage-versions-no-permission">
+                                <mat-icon class="app-manage-versions-no-permission-icon">warning</mat-icon>
                                 {{'VERSION.NO_PERMISSION' | translate}}
                             </div>
                         </ng-template>
@@ -498,11 +498,11 @@
     </adf-start-process>
 </div>
 
-<div *ngIf="showSettingsPanel" class="adf-content-service-settings">
+<div *ngIf="showSettingsPanel" class="app-content-service-settings">
 
     <p>Current folder ID: {{ documentList.currentFolderId }}</p>
 
-    <div class="adf-p-10">
+    <div class="app-p-10">
         Selected Nodes:
         <ul>
             <li *ngFor="let node of documentList.selection">
@@ -511,7 +511,7 @@
         </ul>
     </div>
 
-    <div class="adf-container">
+    <div class="app-container">
         <section>
             <mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
                 Show Name Column
@@ -679,7 +679,7 @@
         </section>
     </div>
 
-    <div class="adf-p-10">
+    <div class="app-p-10">
         <p>
             {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
         </p>

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

@@ -1,71 +1,71 @@
-@mixin adf-file-component-theme($theme) {
-    .adf-container {
+@mixin app-file-component-theme($theme) {
+    .app-container {
         margin: 10px !important;
     }
 
     @media screen and ($mat-xsmall) {
-        .adf-container {
+        .app-container {
             margin: 0;
         }
 
-        .adf-show-versions-button.mat-icon-button {
+        .app-show-versions-button.mat-icon-button {
             display: none;
         }
     }
 
-    .adf-error-message {
+    .app-error-message {
         text-align: left;
     }
 
-    .adf-error-message--text {
+    .app-error-message--text {
         color: #d50000;
     }
 
-    .adf-document-list-container {
+    .app-document-list-container {
         min-height: 400px;
 
-        .adf-datatable-list {
+        .app-datatable-list {
             min-height: 400px;
         }
     }
 
-    .adf-datatable-card .adf-lock-button {
+    .app-datatable-card .app-lock-button {
         top: -10px;
     }
 
-    .adf-site-container-style {
+    .app-site-container-style {
         margin-top: 10px;
         margin-bottom: 10px;
         width: 100%;
         min-width: 200px;
     }
 
-    .adf-content-service-settings {
+    .app-content-service-settings {
         padding: 16px;
     }
 
-    .adf-manage-versions-sidebar {
+    .app-manage-versions-sidebar {
         width: 360px !important;
 
-        & .adf-info-drawer-layout-header {
+        & .app-info-drawer-layout-header {
             display: none !important;
         }
     }
 
-    .adf-no-result__empty_doc_lib {
+    .app-no-result__empty_doc_lib {
         width: 565px;
         height: 161px;
         object-fit: contain;
         margin-top: 17px;
     }
 
-    .adf-empty_template {
+    .app-empty_template {
         text-align: center;
         margin-top: 20px;
         margin-bottom: 20px;
     }
 
-    .adf-no-result-message {
+    .app-no-result-message {
         height: 32px;
         opacity: 0.26;
         font-size: 24px;
@@ -73,12 +73,12 @@
         letter-spacing: -1px;
     }
 
-    .adf-container-recent {
+    .app-container-recent {
         mat-icon {
             margin-left: 20px;
         }
 
-        .adf-empty-list__block {
+        .app-empty-list__block {
             height: 100%;
             padding: 0;
             margin: 0;

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

@@ -386,7 +386,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return node && node.list && node.list.entries.length === 0;
     }
 
-    onContentActionError(errors) {
+    onContentActionError(errors: any) {
         const errorStatusCode = JSON.parse(errors.message).error.statusCode;
         let translatedErrorMessage: any;
 
@@ -404,24 +404,24 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.openSnackMessage(translatedErrorMessage);
     }
 
-    onContentActionSuccess(message) {
+    onContentActionSuccess(message: string) {
         const translatedMessage: any = this.translateService.instant(message);
         this.openSnackMessage(translatedMessage);
         this.documentList.reload();
     }
 
-    onDeleteActionSuccess(message) {
+    onDeleteActionSuccess(message: string) {
         this.uploadService.fileDeleted.next(message);
         this.deleteElementSuccess.emit();
         this.documentList.reload();
         this.openSnackMessage(message);
     }
 
-    onPermissionRequested(node) {
+    onPermissionRequested(node: any) {
         this.router.navigate(['/permissions', node.value.entry.id]);
     }
 
-    onManageVersions(event) {
+    onManageVersions(event: any) {
         const contentEntry = event.value.entry;
         const showComments = this.showVersionComments;
         const allowDownload = this.allowVersionDownload;
@@ -438,7 +438,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    onManageMetadata(event) {
+    onManageMetadata(event: any) {
         const contentEntry = event.value.entry;
 
         if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
@@ -499,7 +499,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return false;
     }
 
-    startProcessAction($event) {
+    startProcessAction($event: any) {
         this.formValues['file'] = $event.value.entry;
 
         const dialogRef = this.dialog.open(SelectAppsDialogComponent, {
@@ -588,15 +588,15 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return true;
     }
 
-    runCustomAction(event) {
+    runCustomAction(event: any) {
         this.logService.log(event);
     }
 
-    getFileFiltering() {
+    getFileFiltering(): string {
         return this.acceptedFilesTypeShow ? this.acceptedFilesType : '*';
     }
 
-    createLibrary() {
+    createLibrary(): void {
         const dialogInstance: any = this.dialog.open(LibraryDialogComponent, {
             width: '400px'
         });
@@ -610,5 +610,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         if (search && search.highlight) {
             return search.highlight.map((currentHighlight) => currentHighlight.snippets).join(', ');
         }
+        return '';
     }
 }

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

@@ -1,12 +1,12 @@
 <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
 </adf-form-list>
-<div class="adf-form-container" *ngIf="!isEmptyForm()">
+<div class="app-form-container" *ngIf="!isEmptyForm()">
     <adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">
     </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>
-<section class="adf-form-list-margin">
+<section class="app-form-list-margin">
     <mat-slide-toggle color="primary" [(ngModel)]="showValidationIcon">
         Show Validation Icon
     </mat-slide-toggle>

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

@@ -1,12 +1,12 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-store-form-container {
+.app-store-form-container {
     width: 80%;
     height: 80%;
 }
 
-.adf-form-list-margin {
+.app-form-list-margin {
     margin-left: 26px;
 }

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

@@ -1,4 +1,4 @@
-<div class="adf-form-container">
+<div class="app-form-container">
     <mat-accordion>
         <mat-expansion-panel>
             <mat-expansion-panel-header>

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

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

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

@@ -2,7 +2,7 @@
 
     <mat-tab-group>
         <mat-tab label="Form">
-            <div class="adf-form-container">
+            <div class="app-form-container">
                 <adf-form
                     [showRefreshButton]="false"
                     [form]="form"
@@ -10,7 +10,7 @@
                 </adf-form>
             </div>
 
-            <div class="adf-console" #console>
+            <div class="app-console" #console>
                 <h3>Error log:</h3>
                 <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
                     translate}}</p>
@@ -19,20 +19,20 @@
         <mat-tab label="Editor">
             <ngx-monaco-editor
                 id="adf-form-config-editor"
-                class="adf-form-config-editor"
+                class="app-form-config-editor"
                 [options]="editorOptions"
                 [(ngModel)]="formConfig"
                 (onInit)="onInitFormEditor($event)">
             </ngx-monaco-editor>
-            <div class="adf-form-editor-buttons">
-                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
+            <div class="app-form-editor-buttons">
+                <button mat-raised-button id="app-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
                     form config
                 </button>
-                <button mat-raised-button id="adf-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
+                <button mat-raised-button id="app-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
                     form config
                 </button>
             </div>
-            <div class="adf-upload-config-button">
+            <div class="app-upload-config-button">
                 <a mat-raised-button color="primary" >
                     <mat-icon>file_upload</mat-icon>
                     <label for="upload-config-file">Upload JSON File</label>

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

@@ -1,17 +1,17 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;
@@ -31,16 +31,16 @@
     }
 }
 
-.adf-form-config-editor {
+.app-form-config-editor {
     height: 500px !important;
 }
 
-.adf-form-editor-buttons {
+.app-form-editor-buttons {
     display: flex;
     justify-content: space-evenly;
 }
 
-.adf-upload-config-button {
+.app-upload-config-button {
     display: flex;
     justify-content: center;
 

demo-shell/src/app/components/header-data/header-data.component.html

@@ -1,4 +1,4 @@
-<div class="adf-content adf-header-data">
+<div class="app-content app-header-data">
     <h1>Header data</h1>
     <mat-card>
         <div>

demo-shell/src/app/components/header-data/header-data.component.scss

@@ -1,4 +1,4 @@
-.adf-content {
+.app-content {
     padding: 10px;
     .mat-card {
         padding: 16px 24px;

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

@@ -1,12 +1,12 @@
-<header class="adf-home-background">
-    <div class="adf-home-section ad">
-        <div class="adf-home-headline">
+<header class="app-home-background">
+    <div class="app-home-section ad">
+        <div class="app-home-headline">
             <h1 class="mat-h1">ADF</h1>
             <h2>{{ 'APP.HOME.TITLE' | translate}}</h2>
         </div>
 
-        <div class="adf-home-start">
-            <a mat-raised-button class="adf-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
+        <div class="app-home-start">
+            <a mat-raised-button class="app-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
         </div>
     </div>
 </header>

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

@@ -5,16 +5,16 @@
     height: 100%;
 }
 
-.adf-home-header-background {
+.app-home-header-background {
     overflow: hidden;
 }
 
-.adf-home-section {
+.app-home-section {
     text-align: center;
     padding-top: 60px;
 }
 
-.adf-home-headline {
+.app-home-headline {
 
     h1 {
         font-size: 56px;
@@ -31,6 +31,6 @@
     }
 }
 
-.adf-home-docs-button {
+.app-home-docs-button {
     margin: 30px;
 }

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

@@ -1,7 +1,7 @@
 <!--BPM, ECN AND CSRF TOGGLE-->
 
-<div class="adf-settings">
-    <p class="adf-toggle">
+<div class="app-settings">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="switch3"
             [color]="'primary'"
@@ -10,7 +10,7 @@
             CSRF
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="switch4"
             [color]="'primary'"
@@ -19,7 +19,7 @@
             {{ 'LOGIN.LOGIN_FOOTER'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="adf-toggle-show-rememberme"
             [color]="'primary'"
@@ -28,7 +28,7 @@
             {{ 'LOGIN.SHOW_REMEMBERME'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="adf-toggle-show-successRoute"
             [color]="'primary'"
@@ -37,7 +37,7 @@
             {{ 'LOGIN.SHOW_SUCCESS_ROUTE'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <ng-container *ngIf="customSuccessRoute">
             <mat-form-field floatPlaceholder="float">
                 <input matInput
@@ -48,7 +48,7 @@
         </ng-container>
     </p>
 
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="adf-toggle-logo"
             [color]="'primary'"
@@ -57,7 +57,7 @@
             {{ 'LOGIN.CUSTOM_LOGO'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <ng-container *ngIf="customLogoImage">
             <mat-form-field floatPlaceholder="float">
                 <input matInput
@@ -72,7 +72,7 @@
 
 <!--SETTING BUTTON-->
 
-<a mat-fab class="adf-setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
+<a mat-fab class="app-setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
     <mat-icon>settings</mat-icon>
 </a>
 
@@ -87,7 +87,7 @@
     copyrightText="{{ 'application.copyright' | adfAppConfig }}"
     (success)="onLogin()"
     (error)="onError($event)">
-    <div class="adf-mobile-settings">
+    <div class="app-mobile-settings">
         <p>
             <mat-slide-toggle
                 id="switch3-mobile"
@@ -106,7 +106,7 @@
                 {{ 'LOGIN.LOGIN_FOOTER'| translate }}
             </mat-slide-toggle>
         </p>
-        <button type="button" mat-raised-button color="accent" class="adf-mobile-setting-button" routerLink="/settings"
+        <button type="button" mat-raised-button color="accent" class="app-mobile-setting-button" routerLink="/settings"
                 data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
         </button>
 

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

@@ -1,12 +1,12 @@
-@mixin adf-login-component-theme($theme) {
-    .adf-setting-button.mat-fab.mat-accent {
+@mixin app-login-component-theme($theme) {
+    .app-setting-button.mat-fab.mat-accent {
         position: absolute;
         right: 10px;
         top: 10px;
         z-index: 1;
     }
 
-    .adf-settings {
+    .app-settings {
         border-radius: 8px;
         position: absolute;
         background-color: papayawhip;
@@ -16,36 +16,36 @@
         z-index: 1;
     }
 
-    .adf-toggle {
+    .app-toggle {
         width: auto;
         margin: 5px;
         padding: 5px;
     }
 
-    .adf-mobile-settings, .adf-mobile-setting-button {
+    .app-mobile-settings, .app-mobile-setting-button {
         display: none;
     }
 
     @media screen and ($mat-small) {
-        .adf-settings, .adf-setting-button.mat-fab.mat-accent {
+        .app-settings, .app-setting-button.mat-fab.mat-accent {
             display: none;
         }
 
-        .adf-mobile-settings, .adf-mobile-setting-button {
+        .app-mobile-settings, .app-mobile-setting-button {
             display: block;
         }
 
-        .adf-mobile-setting-button {
+        .app-mobile-setting-button {
             width: 100%;
         }
 
-        .adf-mobile-settings {
+        .app-mobile-settings {
             padding-bottom: 20px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
     }
 
-    .adf-settings ::ng-deep .mat-slide-toggle-thumb-container {
+    .app-settings ::ng-deep .mat-slide-toggle-thumb-container {
         cursor: pointer;
     }
 }

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

@@ -1,16 +1,16 @@
-<header class="adf-logout-background">
-    <div class="adf-logout-section" data-automation-id="adf-logout-section">
-        <div class="adf-logout-headline">
+<header class="app-logout-background">
+    <div class="app-logout-section" data-automation-id="adf-logout-section">
+        <div class="app-logout-headline">
             <h1>{{ 'APP.LOGOUT.TITLE' | translate}}</h1>
             <h2>{{ 'APP.LOGOUT.SUB_TITLE' | translate}}</h2>
         </div>
 
-        <div class="adf-logout-login">
-            <a mat-raised-button class="adf-logout-docs-button adf-primary-color"
+        <div class="app-logout-login">
+            <a mat-raised-button class="app-logout-docs-button adf-primary-color"
                href="/login">{{ 'APP.LOGOUT.LOGIN' | translate}}</a>
         </div>
-        <div class="adf-logout-home">
-            <a mat-raised-button class="adf-logout-docs-button adf-primary-color"
+        <div class="app-logout-home">
+            <a mat-raised-button class="app-logout-docs-button adf-primary-color"
                href="/">{{ 'APP.LOGOUT.HOME' | translate}}</a>
         </div>
     </div>

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

@@ -4,16 +4,16 @@
     align-items: center;
 }
 
-.adf-logout-header-background {
+.app-logout-header-background {
     overflow: hidden;
 }
 
-.adf-logout-section {
+.app-logout-section {
     text-align: center;
     padding-top: 60px;
 }
 
-.adf-logout-headline {
+.app-logout-headline {
 
     h1 {
         font-size: 56px;
@@ -30,10 +30,10 @@
     }
 }
 
-.adf-logout-docs-button {
+.app-logout-docs-button {
     margin: 30px;
 }
 
-.adf-logout-login {
+.app-logout-login {
     float: left;
 }

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

@@ -1,4 +1,4 @@
-<div class="adf-main-content">
+<div class="app-main-content">
     <h1>Notification Service</h1>
 
     <ul>

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

@@ -1,3 +1,3 @@
-.adf-main-content {
+.app-main-content {
     padding: 10px;
 }

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

@@ -1,4 +1,4 @@
-<div class="adf-inherit_permission_button">
+<div class="app-inherit_permission_button">
     <button mat-raised-button
             [color]="toggleStatus?'accent':'primary'"
             adf-inherit-permission [nodeId]="nodeId"

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

@@ -1,4 +1,4 @@
-.adf-inherit_permission_button {
+.app-inherit_permission_button {
     padding-top: 20px;
     display: flex;
     justify-content: center;

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

@@ -11,11 +11,11 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Format" [(ngModel)]="format">
         </mat-form-field>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
                 <mat-option *ngFor="let language of languages" [value]="language.key">
                     {{language.label}}
@@ -43,11 +43,11 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Format" [(ngModel)]="format">
         </mat-form-field>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
                 <mat-option *ngFor="let language of languages" [value]="language.key">
                     {{language.label}}
@@ -71,20 +71,20 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Number" [(ngModel)]="number">
         </mat-form-field>
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Min Integer Digits" [(ngModel)]="decimalValues.minIntegerDigits">
         </mat-form-field>
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Min Fraction Digits" [(ngModel)]="decimalValues.minFractionDigits">
         </mat-form-field>
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Max Fraction Digits" [(ngModel)]="decimalValues.maxFractionDigits">
         </mat-form-field>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
                 <mat-option *ngFor="let language of languages" [value]="language.key">
                     {{language.label}}

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

@@ -2,6 +2,6 @@ h2 {
     padding: 20px;
 }
 
-.adf-input-field {
+.app-input-field {
     margin: 20px;
 }

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

@@ -1,4 +1,4 @@
-<div class="adf-process-list-inputs">
+<div class="app-process-list-inputs">
 
     <form [formGroup]="processListForm">
         <mat-form-field>
@@ -77,7 +77,7 @@
             </mat-error>
         </mat-form-field>
 
-        <div class="adf-reset-button">
+        <div class="app-reset-button">
             <button mat-raised-button (click)="resetProcessForm()">Reset</button>
         </div>
     </form>

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

@@ -1,4 +1,4 @@
-.adf-process-list-inputs {
+.app-process-list-inputs {
     margin: 20px auto 0;
     max-width: 1200px;
 
@@ -8,13 +8,13 @@
     }
 }
 
-.adf-reset-button {
+.app-reset-button {
     margin-bottom: 50px;
     display: flex;
     justify-content: center;
 }
 
-.adf-process-list-error-message {
+.app-process-list-error-message {
     color: red;
     text-align: center;
 }

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

@@ -11,14 +11,14 @@
                 [processInstanceId]="processInstanceId"
                 (attachmentClick)="onAttachmentClick($event)">
                     <adf-empty-list>
-                      <div adf-empty-list-header class="adf-empty-list-header">
+                      <div adf-empty-list-header class="app-empty-list-header">
                           {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
                        </div>
                             <div adf-empty-list-body>
-                            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
+                            <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
                               {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                             </div>
-                                  <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
+                                  <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
                                   {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                                   </div>
                             </div>

demo-shell/src/app/components/process-service/process-service.component.html

@@ -1,10 +1,10 @@
 <mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
                data-automation-id="navigation-bar">
-    <mat-tab id="adf-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
-        <div class="adf-page-content" *ngIf="showTaskTab">
-            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="265px">
-                    <div class="adf-list-buttons">
+    <mat-tab id="app-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+        <div class="app-page-content" *ngIf="showTaskTab">
+            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="app-grid-item app-tasks-menu" fxFlex.gt-md="265px">
+                    <div class="app-list-buttons">
                         <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                  title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                             <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@@ -16,12 +16,12 @@
                             </div>
                         </adf-sidebar-action-menu>
                     </div>
-                    <mat-accordion class="adf-accordion-panel" [displayMode]="flat">
+                    <mat-accordion class="app-accordion-panel" [displayMode]="flat">
                         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
                                     <mat-icon>assignment</mat-icon>
-                                    <div class="adf-accordion-title-padding">Tasks</div>
+                                    <div class="app-accordion-title-padding">Tasks</div>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
                             <adf-task-filters [filterParam]="filterSelected"
@@ -33,7 +33,7 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div>
-                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
+                <div class="app-grid-item app-tasks-list" fxFlex.gt-md="380px"
                      [ngClass.gt-md]="{'adf-small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
@@ -56,8 +56,8 @@
                         <!-- Custom column definition demo -->
 
                         <!-- <data-columns>
-                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="adf-full-width name-column"></data-column>
-                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="adf-hidden"></data-column>
+                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="app-full-width name-column"></data-column>
+                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="app-hidden"></data-column>
                         </data-columns> -->
 
                     </adf-tasklist>
@@ -69,8 +69,8 @@
                         #taskListPagination>
                     </adf-pagination>
                 </div>
-                <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
-                     data-automation-id="adf-tasks-details">
+                <div class="app-grid-item app-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
+                     data-automation-id="app-tasks-details">
                     <adf-task-details #activitiDetails
                                       [debugMode]="true"
                                       [taskId]="currentTaskId"
@@ -100,7 +100,7 @@
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="adf-grid-item adf-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                <div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <adf-start-task
                         [appId]="appId"
                         [name]="defaultTaskName"
@@ -113,10 +113,10 @@
     </mat-tab>
     <mat-tab id="processes-header" href="#processes"
              label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
-        <div class="adf-page-content" *ngIf="showProcessTab">
-            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
-                    <div class="adf-list-buttons">
+        <div class="app-page-content" *ngIf="showProcessTab">
+            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
+                    <div class="app-list-buttons">
                         <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                  title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                             <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@@ -129,12 +129,12 @@
                             </div>
                         </adf-sidebar-action-menu>
                     </div>
-                    <mat-accordion class="adf-accordion-panel" [displayMode]="flat">
+                    <mat-accordion class="app-accordion-panel" [displayMode]="flat">
                         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
                                     <mat-icon>assessment</mat-icon>
-                                    <div class="adf-accordion-title-padding">Processes</div>
+                                    <div class="app-accordion-title-padding">Processes</div>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
                             <adf-process-instance-filters
@@ -149,7 +149,7 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div>
-                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
+                <div class="app-grid-item app-processes-list app-list" fxFlex.gt-md="380px"
                      [ngClass.gt-md]="{'adf-small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
@@ -168,8 +168,8 @@
                         <!-- Custom column definition demo -->
 
                         <!-- <data-columns>
-                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="adf-full-width name-column"></data-column>
-                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="adf-hidden"></data-column>
+                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="app-full-width name-column"></data-column>
+                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="app-hidden"></data-column>
                         </data-columns> -->
 
                     </adf-process-instance-list>
@@ -180,7 +180,7 @@
                         #processListPagination>
                     </adf-pagination>
                 </div>
-                <div class="adf-grid-item adf-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                <div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                     <adf-process-instance-details
                         #activitiProcessDetails
                         [processInstanceId]="currentProcessInstanceId"
@@ -208,7 +208,7 @@
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="adf-grid-item adf-processes-start" fxFlex.gt-md="1 1 auto"
+                <div class="app-grid-item app-processes-start" fxFlex.gt-md="1 1 auto"
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         #activitiStartProcess
@@ -225,8 +225,8 @@
     </mat-tab>
     <mat-tab id="report-header" href="#report"
              label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
+        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
                 <mat-divider></mat-divider>
                 <adf-analytics-report-list
@@ -236,7 +236,7 @@
                     #analyticsReportList>
                 </adf-analytics-report-list>
             </div>
-            <div class="adf-grid-item adf-reports-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
                 <adf-analytics
                     *ngIf="report"
                     [appId]="appId"
@@ -254,11 +254,11 @@
     </mat-tab>
     <mat-tab id="settings-header" href="#settings"
              label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
-        <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="adf-grid-item adf-settings-menu" fxFlex.gt-md="300px">
+        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="app-grid-item app-settings-menu" fxFlex.gt-md="300px">
                 <span><h3>Settings Menu</h3></span>
             </div>
-            <div class="adf-grid-item adf-settings-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-settings-details" fxFlex.gt-md="1 1 auto">
                 <div>
                     <mat-slide-toggle id="adf-show-task-filter-icon" [(ngModel)]="showTaskFilterIcon">Show task filters icons
                     </mat-slide-toggle>

demo-shell/src/app/components/process-service/process-service.component.scss

@@ -1,12 +1,12 @@
-@mixin adf-process-service-component-theme($theme) {
-    .adf-no-form-container {
+@mixin app-process-service-component-theme($theme) {
+    .app-no-form-container {
         text-align: center;
         font-weight: 600;
         font-size: 18px;
     }
 
-    .adf-grid {
-        .adf-grid-item {
+    .app-grid {
+        .app-grid-item {
             margin: 4px;
             box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
             0 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -14,19 +14,19 @@
             padding: 10px;
         }
 
-        .adf-list-buttons {
+        .app-list-buttons {
             margin-bottom: 24px;
         }
 
-        .adf-tasks-list.adf-small-pagination,
-        .adf-processes-list.adf-small-pagination {
-            .adf-pagination {
+        .app-tasks-list.app-small-pagination,
+        .app-processes-list.app-small-pagination {
+            .app-pagination {
 
                 flex-wrap: wrap;
                 padding-bottom: 24px;
                 padding-top: 8px;
 
-                &__range-block.adf-pagination__block:first-child {
+                &__range-block.app-pagination__block:first-child {
                     order: 1;
                     width: 60%;
                     flex: 0 0 auto;
@@ -61,8 +61,8 @@
             }
         }
 
-        .adf-list {
-            .adf-datatable-list {
+        .app-list {
+            .app-datatable-list {
                 border: none;
             }
         }
@@ -72,13 +72,13 @@
         }
 
         @media screen and ($mat-small) {
-            container-widget .adf-grid-list {
+            container-widget .app-grid-list {
                 flex-direction: column;
             }
         }
     }
 
-    .adf-accordion-panel {
+    .app-accordion-panel {
         .mat-expansion-panel {
             background: inherit;
         }
@@ -93,7 +93,7 @@
             align-items: center;
         }
 
-        .adf-accordion-title-padding {
+        .app-accordion-title-padding {
             padding-left: 20px;
         }
     }

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

@@ -9,13 +9,13 @@
                 [taskId]="taskId"
                 (attachmentClick)="onAttachmentClick($event)">
                 <adf-empty-list>
-                    <div adf-empty-list-header class="adf-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
+                    <div adf-empty-list-header class="app-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
                     </div>
                     <div adf-empty-list-body>
-                        <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
+                        <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                         </div>
-                        <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
+                        <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                         </div>
                     </div>

demo-shell/src/app/components/report-issue/report-issue.component.html

@@ -1,9 +1,9 @@
-<div class="adf-report-issue">
+<div class="app-report-issue">
     <h1>Report Issue</h1>
-    <form class="adf-report-issue-form">
+    <form class="app-report-issue-form">
         <mat-form-field>
-            <textarea matInput placeholder="Leave a comment" class="adf-report-issue-form-textarea"></textarea>
+            <textarea matInput placeholder="Leave a comment" class="app-report-issue-form-textarea"></textarea>
         </mat-form-field>
     </form>
     <button mat-raised-button>Submit</button>
-</div>
+</div>

demo-shell/src/app/components/report-issue/report-issue.component.scss

@@ -1,4 +1,4 @@
-.adf-report-issue {
+.app-report-issue {
     margin: 50px 0;
     display: flex;
     flex-direction: column;

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

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

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

@@ -1,5 +1,5 @@
 <div>
-    <div id="container-for-custom-input" class="adf-search-extended-input-containers">
+    <div id="container-for-custom-input" class="app-search-extended-input-containers">
         <mat-form-field>
             <label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
             <input type="text" matInput
@@ -8,12 +8,12 @@
     </div>
     <div>
       <adf-search #auto="searchAutocomplete"
-                  class="adf-example-card-search-container">
+                  class="app-example-card-search-container">
           <ng-template let-data>
-            <mat-card class="adf-example-card"
+            <mat-card class="app-example-card"
                  *ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
                 <mat-card-header>
-                    <div mat-card-avatar class="adf-example-header-image"></div>
+                    <div mat-card-avatar class="app-example-header-image"></div>
                     <mat-card-title>{{ item?.entry.name }}</mat-card-title>
                     <mat-card-subtitle>{{ item?.entry.createdAt }}</mat-card-subtitle>
                 </mat-card-header>
@@ -24,8 +24,8 @@
                     </p>
                 </mat-card-content>
             </mat-card>
-            <mat-card class="adf-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
-                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
+            <mat-card class="app-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
+                <p mat-line class="app-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
             </mat-card>
         </ng-template>
       </adf-search>

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

@@ -1,62 +1,61 @@
-div.adf-search-results-container {
+div.app-search-results-container {
     padding: 0 20px 20px;
 }
 
-.adf-search-title {
+.app-search-title {
     font-size: 22px;
     padding: 15px 0;
 }
 
 @media screen and (max-width: 600px) {
-    :host .adf-col-display-name {
+    :host .app-col-display-name {
         min-width: 100px;
     }
-    :host .adf-col-modified-at, :host .adf-col-modified-by {
+    :host .app-col-modified-at, :host .app-col-modified-by {
         display: none;
     }
-    :host div.adf-search-results-container table {
+    :host div.app-search-results-container table {
         width: 100%;
     }
 }
 
-.adf-search-results-content {
+.app-search-results-content {
     display: flex;
 }
 
-.adf-search-extended-input-containers {
+.app-search-extended-input-containers {
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-evenly;
 }
 
-.adf-search-extended-input-textarea {
+.app-search-extended-input-textarea {
     width: 300px;
 }
 
-.adf-search-extended-label-error {
+.app-search-extended-label-error {
     display: flex;
     flex-direction: column;
 }
 
-.adf-example-card {
+.app-example-card {
     width: 200px;
     flex: 0 20%;
     margin: 15px;
-  }
+}
 
-  .adf-example-card-search-container {
+.app-example-card-search-container {
     display: flex;
     flex-wrap: wrap;
-  }
-
-  .example-header-image {
+}
 
+.example-header-image {
     background-size: cover;
     margin-bottom: 15px;
-  }
+}
 
-  .example-search-input {
-      width: 100px;
-      border: 1 solid;
-      border-color: black;
-  }
+.example-search-input {
+    width: 100px;
+    border: 1 solid;
+    border-color: black;
+}

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

@@ -1,13 +1,13 @@
-<div class="adf-search-results__facets">
+<div class="app-search-results__facets">
     <adf-search-chip-list [searchFilter]="searchFilter" [clearAll]="true"></adf-search-chip-list>
 </div>
 
-<div class="adf-search-results">
-    <adf-search-filter class="adf-search-settings" #searchFilter></adf-search-filter>
+<div class="app-search-results">
+    <adf-search-filter class="app-search-settings" #searchFilter></adf-search-filter>
 
-    <div class="adf-search-results__content">
+    <div class="app-search-results__content">
         <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
-        <div class="adf-search-results__sorting">
+        <div class="app-search-results__sorting">
             <adf-search-sorting-picker></adf-search-sorting-picker>
         </div>
         <app-files-component

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

@@ -1,8 +1,8 @@
-.adf-search-results {
+.app-search-results {
     display: flex;
     margin-left: 5px;
 
-    .adf-search-settings {
+    .app-search-settings {
         width: 260px;
         border: 1px solid #eee;
     }
@@ -20,23 +20,23 @@
     }
 }
 
-div.adf-search-results-container {
+div.app-search-results-container {
     padding: 0 20px 20px;
 }
 
-.adf-search-title {
+.app-search-title {
     font-size: 22px;
     padding: 15px 0;
 }
 
 @media screen and (max-width: 600px) {
-    :host .adf-col-display-name {
+    :host .app-col-display-name {
         min-width: 100px;
     }
-    :host .adf-col-modified-at, :host .adf-col-modified-by {
+    :host .app-col-modified-at, :host .app-col-modified-by {
         display: none;
     }
-    :host div.adf-search-results-container table {
+    :host div.app-search-results-container table {
         width: 100%;
     }
 }

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

@@ -17,7 +17,7 @@
 
 import { Component, OnInit, Optional, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
-import { NodePaging, Pagination, ResultSetPaging } from '@alfresco/js-api';
+import { Pagination, ResultSetPaging } from '@alfresco/js-api';
 import { SearchQueryBuilderService } from '@alfresco/adf-content-services';
 import { UserPreferencesService, SearchService, AppConfigService } from '@alfresco/adf-core';
 import { Subject } from 'rxjs';
@@ -33,7 +33,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
 
     queryParamName = 'q';
     searchedWord = '';
-    data: NodePaging;
+    data: ResultSetPaging;
     pagination: Pagination;
     isLoading = true;
 

demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss

@@ -1,4 +1,4 @@
-.adf-shared-link-view {
+.app-shared-link-view {
     width: 100%;
     height: 100%;
 }

demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts

@@ -24,7 +24,7 @@ import { ActivatedRoute, Router } from '@angular/router';
     styleUrls: [ 'shared-link-view.component.scss' ],
     encapsulation: ViewEncapsulation.None,
     // tslint:disable-next-line:use-host-property-decorator
-    host: { 'class': 'adf-shared-link-view' }
+    host: { 'class': 'app-shared-link-view' }
 })
 export class SharedLinkViewComponent implements OnInit {
 

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

@@ -2,17 +2,17 @@
 <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">
+    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-social-title">
+            <div class="app-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">
+    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-social-title">
+            <div class="app-social-title">
                 {{'SOCIAL.RATING' | translate }}
             </div>
             <adf-rating [nodeId]="nodeId"></adf-rating>

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

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

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

@@ -4,22 +4,22 @@
 
 <br>
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+    <div class="app-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">
+    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-tag-example-title">
+            <div class="app-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">
+    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-tag-example-title">
+            <div class="app-tag-example-title">
                 {{'TAG.NODE_LIST' | translate }}
             </div>
             <adf-tag-node-list [showDelete]="showDelete" [nodeId]="nodeId"></adf-tag-node-list>

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

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

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

@@ -1,4 +1,4 @@
-<div class="adf-task-list-demo-inputs">
+<div class="app-task-list-demo-inputs">
 
     <form [formGroup]="taskListForm">
         <mat-form-field>
@@ -139,7 +139,7 @@
         </mat-form-field>
     </form>
 </div>
-<div class="adf-reset-button">
+<div class="app-reset-button">
     <button mat-raised-button (click)="resetTaskForm()">Reset</button>
 </div>
 
@@ -162,7 +162,7 @@
         #taskList>
         <data-columns>
             <data-column key="id" title="Id"></data-column>
-            <data-column key="assignee" title="Assignee" class="adf-full-width adf-name-column">
+            <data-column key="assignee" title="Assignee" class="adf-full-width app-name-column">
                 <ng-template let-entry="$implicit">
                     <div>{{entry.row.obj.assignee | fullName}}</div>
                 </ng-template>

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

@@ -1,4 +1,4 @@
-.adf-task-list-demo-inputs {
+.app-task-list-demo-inputs {
     margin: 20px auto 0;
     max-width: 1200px;
 
@@ -8,13 +8,13 @@
     }
 }
 
-.adf-reset-button {
+.app-reset-button {
     margin-bottom: 50px;
     display: flex;
     justify-content: center;
 }
 
-.adf-task-list-demo-error-message {
+.app-task-list-demo-error-message {
     color: red;
     text-align: center;
 }

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

@@ -2,7 +2,7 @@
     <mat-icon>format_color_fill</mat-icon>
 </button>
 
-<mat-menu class="docs-theme-picker-menu adf-menu" #themeMenu="matMenu" x-position="before">
+<mat-menu class="docs-theme-picker-menu app-menu" #themeMenu="matMenu" x-position="before">
     <button *ngFor="let theme of themes" [attr.data-automation-id]="theme.name" 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"

demo-shell/src/app/components/tree-view/tree-view-sample.component.html

@@ -8,12 +8,12 @@
     CLICKED NODE: {{clickedNodeName}}
 </span>
 
-<adf-tree-view-list *ngIf="!errorMessage; else erroOccurred"
+<adf-tree-view-list *ngIf="!errorMessage; else errorOccurred"
         [nodeId]="nodeIdSample"
         (nodeClicked)="onClick($event)"
         (error)="onErrorOccurred($event)">
 </adf-tree-view-list>
-<ng-template #erroOccurred>
+<ng-template #errorOccurred>
     <span>An Error Occurred </span>
     <span>{{errorMessage}}</span>
 </ng-template>

demo-shell/src/app/components/tree-view/tree-view-sample.component.ts

@@ -25,7 +25,7 @@ import { Component } from '@angular/core';
 export class TreeViewSampleComponent {
 
     clickedNodeName: string = '';
-    errorMessage = '';
+    errorMessage: string = '';
 
     nodeIdSample: string = '-my-';
 
@@ -38,7 +38,7 @@ export class TreeViewSampleComponent {
         this.errorMessage = '';
     }
 
-    onErrorOccurred(error) {
+    onErrorOccurred(error: string) {
         this.clickedNodeName = '';
         this.errorMessage = error;
     }

demo-shell/src/custom-style-dev.scss

@@ -4,9 +4,9 @@
 @import './app/components/process-service/process-service.component.scss';
 
 
-@import '../../lib/content-services/styles/index';
+@import '../../lib/content-services/src/lib/styles/index';
 @import '../../lib/process-services/src/lib/styles/index';
-@import '../../lib/insights/styles/index';
+@import '../../lib/insights/src/lib/styles/index';
 @import '../../lib/core/styles/index';
 @import '../../lib/process-services-cloud/src/lib/styles/index';
 
@@ -20,10 +20,10 @@ $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-file-component-theme($theme);
-@include adf-login-component-theme($theme);
-@include adf-process-service-component-theme($theme);
+@include app-layout-theme($theme);
+@include app-file-component-theme($theme);
+@include app-login-component-theme($theme);
+@include app-process-service-component-theme($theme);
 
 
 @include adf-content-services-theme($theme);