[ADF-868] Use new ADF prefix in all tags (#2035)

* use new ADF prefix in all thr tag * fix failing test * fix datatable test
2026-09-09 18:03:21 +00:00 · 2017-08-01 10:19:33 +01:00
parent ba580ad11d
commit ff2c566c90
95 changed files with 373 additions and 471 deletions
@@ -21,20 +21,19 @@
 ### Components
 <!-- CORE START-->
 - [adf-card-view](ng2-alfresco-core/README.md)
 - [adf-accordion-group](ng2-alfresco-core/README.md)
 - [adf-accordion](ng2-alfresco-core/README.md)
 - [adf-card-view](ng2-alfresco-core/README.md)
 - [adf-toolbar](ng2-alfresco-core/README.md)<!-- CORE END-->
 <!-- CORE END-->
 ### Directives
 <!-- CORE DIRECTIVE START-->
- [context-menu](ng2-alfresco-core/README.md)
+- [adf-context-menu](ng2-alfresco-core/README.md)
- [alfresco-mdl-textfield](ng2-alfresco-core/README.md)
+- [adf-mdl-menu](ng2-alfresco-core/README.md)
- [alfresco-mdl-menu](ng2-alfresco-core/README.md)
+- [adf-mdl-textfield](ng2-alfresco-core/README.md)
- [alfresco-mdl-button](ng2-alfresco-core/README.md)
+- [adf-mdl-button](ng2-alfresco-core/README.md)
 - [mdl](ng2-alfresco-core/README.md)
 - [adf-upload](ng2-alfresco-core/README.md)<!-- CORE DIRECTIVE END-->
 ## Content service 
@@ -42,27 +41,27 @@
 ### Components
 <!-- CONTENT START-->
- [alfresco-viewer](ng2-alfresco-viewer/README.md)
+- [adf-userinfo](ng2-alfresco-userinfo/README.md)
- [ng2-alfresco-userinfo](ng2-alfresco-userinfo/README.md)
+- [adf-viewer](ng2-alfresco-viewer/README.md)
- [alfresco-file-uploading-list](ng2-alfresco-upload/README.md)
+- [adf-file-uploading-list](ng2-alfresco-upload/README.md)
- [alfresco-upload-button](ng2-alfresco-upload/README.md)
+- [adf-upload-button](ng2-alfresco-upload/README.md)
- [alfresco-upload-drag-area](ng2-alfresco-upload/README.md)
+- [adf-upload-drag-area](ng2-alfresco-upload/README.md)
- [alfresco-tag-node-list](ng2-alfresco-tag/README.md)
+- [adf-tag-node-list](ng2-alfresco-tag/README.md)
- [alfresco-tag-list](ng2-alfresco-tag/README.md)
+- [adf-tag-list](ng2-alfresco-tag/README.md)
- [alfresco-tag-node-actions-list](ng2-alfresco-tag/README.md)
+- [adf-tag-node-actions-list](ng2-alfresco-tag/README.md)
 - [adf-login](ng2-alfresco-login/README.md)
 - [adf-search-autocomplete](ng2-alfresco-search/README.md)
 - [adf-search-control](ng2-alfresco-search/README.md)
 - [adf-search](ng2-alfresco-search/README.md)
 - [adf-like](ng2-alfresco-social/README.md)
 - [adf-rating](ng2-alfresco-social/README.md)
- [alfresco-search-autocomplete](ng2-alfresco-search/README.md)
+- [adf-webscript-get](ng2-alfresco-webscript/README.md)
- [alfresco-search-control](ng2-alfresco-search/README.md)
+- [adf-breadcrumb](ng2-alfresco-documentlist/README.md)
- [alfresco-search](ng2-alfresco-search/README.md)
+- [adf-document-menu-action](ng2-alfresco-documentlist/README.md)
- [alfresco-login](ng2-alfresco-login/README.md)
+- [adf-document-list](ng2-alfresco-documentlist/README.md)
- [adf-breadcrumb, alfresco-document-list-breadcrumb](ng2-alfresco-documentlist/README.md)
+- [adf-pagination](ng2-alfresco-datatable/README.md)
- [alfresco-document-menu-action](ng2-alfresco-documentlist/README.md)
+- [adf-datatable](ng2-alfresco-datatable/README.md)
- [alfresco-document-list](ng2-alfresco-documentlist/README.md)
+- [adf-datatable-cell](ng2-alfresco-datatable/README.md)<!-- CONTENT END-->
 - [alfresco-datatable-cell](ng2-alfresco-datatable/README.md)
 - [alfresco-datatable](ng2-alfresco-datatable/README.md)
 - [alfresco-pagination](ng2-alfresco-datatable/README.md)
 - [alfresco-webscript-get](ng2-alfresco-webscript/README.md)<!-- CONTENT END-->
 <!-- CONTENT END-->
@@ -73,37 +72,37 @@
 ### components
 <!-- BUSINESS START-->
- [diagram-icon-alfresco-publish-task](ng2-activiti-diagrams/README.md)
+- [adf-publish-task](ng2-activiti-diagrams/README.md)
- [diagram-alfresco-publish-task](ng2-activiti-diagrams/README.md)
+- [adf-publish-task](ng2-activiti-diagrams/README.md)
 - [activiti-process-instance-comments](ng2-activiti-processlist/README.md)
 - [activiti-process-instance-variables](ng2-activiti-processlist/README.md)
 - [activiti-process-instance-tasks](ng2-activiti-processlist/README.md)
 - [activiti-process-instance-header](ng2-activiti-processlist/README.md)
 - [adf-people-list](ng2-activiti-tasklist/README.md)
 - [adf-create-task-attachment](ng2-activiti-tasklist/README.md)
- [activiti-people-search](ng2-activiti-tasklist/README.md)
+- [adf-people-list](ng2-activiti-tasklist/README.md)
 - [activiti-start-task](ng2-activiti-tasklist/README.md)
 - [activiti-task-details](ng2-activiti-tasklist/README.md)
 - [activiti-filters](ng2-activiti-tasklist/README.md)
 - [activiti-task-header](ng2-activiti-tasklist/README.md)
 - [activiti-people](ng2-activiti-tasklist/README.md)
 - [adf-task-attachment-list](ng2-activiti-tasklist/README.md)
- [activiti-comments](ng2-activiti-tasklist/README.md)
+- [adf-people-search](ng2-activiti-tasklist/README.md)
- [activiti-checklist](ng2-activiti-tasklist/README.md)
+- [adf-start-task](ng2-activiti-tasklist/README.md)
- [activiti-tasklist](ng2-activiti-tasklist/README.md)
+- [adf-task-details](ng2-activiti-tasklist/README.md)
- [activiti-apps](ng2-activiti-tasklist/README.md)
+- [adf-filters](ng2-activiti-tasklist/README.md)
- [activiti-diagram](ng2-activiti-diagrams/README.md)
+- [adf-task-header](ng2-activiti-tasklist/README.md)
 - [adf-people](ng2-activiti-tasklist/README.md)
 - [adf-comments](ng2-activiti-tasklist/README.md)
 - [adf-checklist](ng2-activiti-tasklist/README.md)
 - [adf-tasklist](ng2-activiti-tasklist/README.md)
 - [adf-apps](ng2-activiti-tasklist/README.md)
 - [adf-process-instance-comments](ng2-activiti-processlist/README.md)
 - [adf-process-instance-variables](ng2-activiti-processlist/README.md)
 - [adf-process-instance-tasks](ng2-activiti-processlist/README.md)
 - [adf-process-instance-header](ng2-activiti-processlist/README.md)
 - [adf-diagram](ng2-activiti-diagrams/README.md)
 - [adf-create-process-attachment](ng2-activiti-processlist/README.md)
 - [adf-process-attachment-list](ng2-activiti-processlist/README.md)
- [activiti-start-process](ng2-activiti-processlist/README.md)
+- [adf-start-process](ng2-activiti-processlist/README.md)
- [activiti-process-instance-details](ng2-activiti-processlist/README.md)
+- [adf-process-instance-details](ng2-activiti-processlist/README.md)
- [activiti-process-instance-filters](ng2-activiti-processlist/README.md)
+- [adf-process-instance-list](ng2-activiti-processlist/README.md)
- [activiti-process-instance-list](ng2-activiti-processlist/README.md)
+- [adf-process-instance-filters](ng2-activiti-processlist/README.md)
- [activiti-analytics-generator](ng2-activiti-analytics/README.md)
+- [adf-start-form](ng2-activiti-form/README.md)
- [activiti-analytics](ng2-activiti-analytics/README.md)
+- [adf-content](ng2-activiti-form/README.md)
- [activiti-start-form](ng2-activiti-form/README.md)
+- [adf-form](ng2-activiti-form/README.md)
- [activiti-content](ng2-activiti-form/README.md)
+- [adf-analytics-generator](ng2-activiti-analytics/README.md)
- [activiti-form](ng2-activiti-form/README.md)<!-- BUSINESS END-->
+- [adf-analytics](ng2-activiti-analytics/README.md)<!-- BUSINESS END-->
 <!-- BUSINESS END-->
@@ -47,17 +47,18 @@ function generateListComponent(currentFileContent, webpackInstance) {
        var componentSection = componentReg.exec(currentFileContent);
        if (componentSection) {
-            var selectorReg = /(selector)(\s?):(\s?)('|")((.|)*)('|")/gm;
+
            var selectorReg = /(adf)([a-zA-Z]|-)+((?!,)|(?! ))/g;
            var selector = selectorReg.exec(componentSection[0]);
                if (selector) {
                if (selector[0].indexOf('alfresco') > 0 || selector[0].indexOf('activiti') > 0 || selector[0].indexOf('adf') > 0) {
                    var selector = selector[0].replace("selector: '[", "").replace("']", '').replace("]", '').replace("selector: '", "").replace("'", '');
                    var removeRoot = webpackInstance.resourcePath.substr(webpackInstance.resourcePath.indexOf('/ng2-components') + 16, webpackInstance.resourcePath.length);
                    var url = removeRoot.substr(0, removeRoot.indexOf('src')) + 'README.md';
-                    var link = '- [' + selector + '](' + url + ')';
+
                    var link = '- [' + selector[0] + '](' + url + ')';
                  //  console.log(link);
                    if (webpackInstance.resourcePath.match('ng2-alfresco-core')) {
                        readmeContent = readmeContent.replace('<!-- CORE START-->', '<!-- CORE START-->\n' + link);
@@ -68,14 +69,14 @@ function generateListComponent(currentFileContent, webpackInstance) {
                    }
                }
            }
-        }
+
        var directiveReg = /(@Directive)(\s?)\((\s?){(\s?)((.|\n)*)}(\s?)\)/gm;
        var directiveSection = directiveReg.exec(currentFileContent);
        if (directiveSection) {
-            var selectorReg = /(selector)(\s?):(\s?)('|")((.|)*)('|")/gm;
+            var selectorReg = /(adf)([a-zA-Z]|-)+((?!,)|(?! ))/g;
            var selector = selectorReg.exec(directiveSection[0]);
            if (selector) {
@@ -68,10 +68,10 @@ The component shows the list of all the available reports
 The component shows the charts related to the reportId passed as input
 ```html
-<activiti-analytics 
+<adf-analytics 
    [appId]="1001" 
    [reportId]="2006">
-</activiti-analytics>
+</adf-analytics>
 ```
 ### Properties
@@ -86,11 +86,11 @@ The component shows the charts related to the reportId passed as input
 You can also hide chart parameters UI by setting the `hideParameters` to `true`:
 ```html
-<activiti-analytics 
+<adf-analytics 
    [appId]="appId" 
    [reportId]="reportId" 
    [hideParameters]="true">
-</activiti-analytics>
+</adf-analytics>
 ```
 ![Analytics-without-parameters](docs/assets/analytics-without-parameters.png)
@@ -109,10 +109,10 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
 The component generate and show the charts
 ```html
-<activiti-analytics-generator 
+<adf-analytics-generator 
    [reportId]="reportId" 
    [reportParamQuery]="reportParamQuery">
-</activiti-analytics>
+</adf-analytics>
 ```
 ### Properties
@@ -22,7 +22,7 @@ import { ReportQuery } from '../models/report.model';
 import { Chart } from '../models/chart.model';
@Component({
-    selector: 'activiti-analytics-generator',
+    selector: 'adf-analytics-generator, activiti-analytics-generator',
    templateUrl: './analytics-generator.component.html',
    styleUrls: ['./analytics-generator.component.css']
 })
@@ -4,6 +4,6 @@
        <dropdown-widget [field]="field" [group]="metricForm.controls.metricGroup" [controllerName]="'metric'"
                         (fieldChanged)="onMetricChanges(field)" [showDefaultOption]="false"></dropdown-widget>
    </form>
-    <activiti-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric" [metricColor]="currentMetricColors" [metricType]="metricType"></activiti-diagram>
+    <adf-diagram *ngIf="currentMetric" [processDefinitionId]="report.processDefinitionId" [metricPercentages]="currentMetric" [metricColor]="currentMetricColors" [metricType]="metricType"></adf-diagram>
 </div>
 <div *ngIf="!hasMetric()">No metric found</div>
@@ -8,8 +8,8 @@
                                 (onEdit)="onEditReport($event)">
    </analytics-report-parameters>
-    <activiti-analytics-generator [reportId]="reportId"
+    <adf-analytics-generator [reportId]="reportId"
                                  [reportParamQuery]="reportParamQuery"
                                  #analyticsgenerator>
-    </activiti-analytics-generator>
+    </adf-analytics-generator>
 </div>
@@ -22,7 +22,7 @@ import { ReportQuery } from '../models/report.model';
 import { AnalyticsGeneratorComponent } from './analytics-generator.component';
@Component({
-    selector: 'activiti-analytics',
+    selector: 'adf-analytics, activiti-analytics',
    templateUrl: './analytics.component.html',
    styleUrls: ['./analytics.component.css']
 })
@@ -36,17 +36,17 @@ npm install ng2-activiti-diagrams
 This component shows the diagram of a process.
 ```html
-<activiti-diagram 
+<adf-diagram 
    [processDefinitionId]="processDefinitionId">
-</activiti-diagram>
+</adf-diagram>
 ```
 Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
 ```html
-<activiti-diagram 
+<adf-diagram 
    [processInstanceId]="processInstanceId">
-</activiti-diagram>
+</adf-diagram>
 ```
 ### Properties
@@ -18,7 +18,7 @@
 import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
@Component({
-    selector: 'diagram-alfresco-publish-task',
+    selector: 'adf-diagram-publish-task, diagram-alfresco-publish-task',
    templateUrl: './diagram-alfresco-publish-task.component.html'
 })
 export class DiagramAlfrescoPublishTaskComponent {
@@ -9,7 +9,7 @@
        <diagram-mule-task [data]="data"></diagram-mule-task>
    </div>
    <div *ngSwitchCase="'alfresco_publish'">
-        <diagram-alfresco-publish-task [data]="data"></diagram-alfresco-publish-task>
+        <adf-diagram-publish-task [data]="data"></adf-diagram-publish-task>
    </div>
    <div *ngSwitchCase="'rest_call'">
        <diagram-rest-call-task [data]="data"></diagram-rest-call-task>
@@ -428,14 +428,14 @@ describe('Test ng2-activiti-diagrams ', () => {
                fixture.detectChanges();
                fixture.whenStable().then(() => {
                    expect(res).not.toBeNull();
-                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect');
+                    let task: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-rect');
                    expect(task).not.toBeNull();
-                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    let taskText: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-multiline-text');
                    expect(taskText).not.toBeNull();
                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
-                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                    let iconTask: any = element.querySelector('adf-diagram-publish-task > diagram-icon-alfresco-publish-task >' +
                        ' raphael-icon-alfresco-publish');
                    expect(iconTask).not.toBeNull();
@@ -2369,14 +2369,14 @@ describe('Test ng2-activiti-diagrams ', () => {
                fixture.detectChanges();
                fixture.whenStable().then(() => {
                    expect(res).not.toBeNull();
-                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect');
+                    let task: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-rect');
                    expect(task).not.toBeNull();
-                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    let taskText: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-multiline-text');
                    expect(taskText).not.toBeNull();
                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
-                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                    let iconTask: any = element.querySelector('adf-diagram-publish-task > diagram-icon-alfresco-publish-task >' +
                        ' raphael-icon-alfresco-publish');
                    expect(iconTask).not.toBeNull();
@@ -2399,14 +2399,14 @@ describe('Test ng2-activiti-diagrams ', () => {
                fixture.detectChanges();
                fixture.whenStable().then(() => {
                    expect(res).not.toBeNull();
-                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
+                    let task: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#017501"]');
                    expect(task).not.toBeNull();
-                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    let taskText: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-multiline-text');
                    expect(taskText).not.toBeNull();
                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
-                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                    let iconTask: any = element.querySelector('adf-diagram-publish-task > diagram-icon-alfresco-publish-task >' +
                        ' raphael-icon-alfresco-publish');
                    expect(iconTask).not.toBeNull();
@@ -2429,14 +2429,14 @@ describe('Test ng2-activiti-diagrams ', () => {
                fixture.detectChanges();
                fixture.whenStable().then(() => {
                    expect(res).not.toBeNull();
-                    let task: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
+                    let task: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-rect[ng-reflect-stroke="#2632aa"]');
                    expect(task).not.toBeNull();
-                    let taskText: any = element.querySelector('diagram-alfresco-publish-task > diagram-task > raphael-multiline-text');
+                    let taskText: any = element.querySelector('adf-diagram-publish-task > diagram-task > raphael-multiline-text');
                    expect(taskText).not.toBeNull();
                    expect(taskText.attributes[1].value).toEqual('Fake Alfresco Publish task');
-                    let iconTask: any = element.querySelector('diagram-alfresco-publish-task > diagram-icon-alfresco-publish-task >' +
+                    let iconTask: any = element.querySelector('adf-diagram-publish-task > diagram-icon-alfresco-publish-task >' +
                        ' raphael-icon-alfresco-publish');
                    expect(iconTask).not.toBeNull();
@@ -23,7 +23,7 @@ import { RaphaelService } from './raphael/raphael.service';
 import { DiagramModel, DiagramElementModel } from '../models/diagram.model';
@Component({
-    selector: 'activiti-diagram',
+    selector: 'adf-diagram, activiti-diagram',
    styleUrls: ['./diagram.component.css'],
    templateUrl: './diagram.component.html'
 })
@@ -19,7 +19,7 @@ import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/cor
 import { DiagramColorService } from '../../services/diagram-color.service';
@Component({
-    selector: 'diagram-icon-alfresco-publish-task',
+    selector: 'adf-diagram-icon-publish-task, diagram-icon-alfresco-publish-task',
    templateUrl: './diagram-icon-alfresco-publish-task.component.html'
 })
 export class DiagramIconAlfrescoPublishTaskComponent {
@@ -71,17 +71,17 @@ npm install ng2-activiti-form
 The component shows a Form from Activiti
 ```html
-<activiti-form 
+<adf-form 
    [taskId]="taskId">
-</activiti-form>
+</adf-form>
 ```
 **Display form instance by task id:**
 ```html
-<activiti-form 
+<adf-form 
    [taskId]="selectedTask?.id">
-</activiti-form>
+</adf-form>
 ```
 For an existing Task both form and values will be fetched and displayed.
@@ -89,10 +89,10 @@ For an existing Task both form and values will be fetched and displayed.
 **Display form definition by form id:**
 ```html
-<activiti-form 
+<adf-form 
    [formId]="selectedFormDefinition?.id"
    [data]="customData">
-</activiti-form>
+</adf-form>
 ```
 Only form definition will be fetched.
@@ -100,10 +100,10 @@ Only form definition will be fetched.
 **Display form definition by form name:**
 ```html
-<activiti-form 
+<adf-form 
    [formName]="selectedFormDefinition?.name"
    [data]="customData">
-</activiti-form>
+</adf-form>
 ```
 **Display form definition by ECM nodeId:**
@@ -113,9 +113,9 @@ If there is no form definied in activiti for the type of the node,
 a new form will be automaticaly created in Activiti.
 ```html
-<activiti-form 
+<adf-form 
    [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'">
-</activiti-form>
+</adf-form>
 ```
 **Display form definition by form name, and store the form field as metadata:**
@@ -123,12 +123,12 @@ a new form will be automaticaly created in Activiti.
 The param nameNode is optional.
 ```html
-<activiti-form 
+<adf-form 
    [formName]="'activitiForms:patientFolder'"
    [saveMetadata]="true"
    [path]="'/Sites/swsdp/documentLibrary'"
    [nameNode]="'test'">
-</activiti-form>
+</adf-form>
 ```
 **Display form definition by ECM nodeId:**
@@ -137,12 +137,12 @@ In this case the metadata of the node are showed in an activiti Form,
 and store the form field as metadata. The param nameNode is optional.
 ```html
-<activiti-form 
+<adf-form 
    [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"
    [saveMetadata]="true"
    [path]="'/Sites/swsdp/documentLibrary'"
    [nameNode]="'test'">
-</activiti-form>
+</adf-form>
 ```
 ### Properties
@@ -191,10 +191,10 @@ All `form*` events receive an instance of the `FormModel` as event argument for
 **MyView.component.html**
 ```html
-<activiti-form 
+<adf-form 
    [taskId]="selectedTask?.id"
    (formSaved)="onFormSaved($event)">
-</activiti-form>
+</adf-form>
 ```
 **MyView.component.ts**
@@ -218,10 +218,10 @@ Alternatively you may want just running additional code on outcome execution wit
 **MyView.component.html**
 ```html
-<activiti-form 
+<adf-form 
    [taskId]="selectedTask?.id"
    executeOutcome="validateForm($event)">
-</activiti-form>
+</adf-form>
 ```
 **MyView.component.ts**
@@ -262,9 +262,9 @@ will also be executed after your custom code.**
 The component shows the content preview.
 ```html
-<activiti-content 
+<adf-content 
    [contentId]="'1001'">
-</activiti-content>
+</adf-content>
 ```
 ### Properties
@@ -22,7 +22,7 @@ import { ContentLinkModel } from './widgets/core/content-link.model';
 import { Observable } from 'rxjs/Rx';
@Component({
-    selector: 'activiti-content',
+    selector: 'adf-content, activiti-content',
    templateUrl: './activiti-content.component.html',
    styleUrls: ['./activiti-content.component.css']
 })
@@ -29,7 +29,7 @@ import { WidgetVisibilityService }  from './../services/widget-visibility.servic
 declare var componentHandler: any;
@Component({
-    selector: 'activiti-form',
+    selector: 'adf-form, activiti-form',
    templateUrl: './activiti-form.component.html',
    styleUrls: ['./activiti-form.component.css']
 })
@@ -51,7 +51,7 @@ import { ContentLinkModel } from './widgets/core/content-link.model';
 * @returns {ActivitiForm} .
 */
@Component({
-    selector: 'activiti-start-form',
+    selector: 'adf-start-form, activiti-start-form',
    templateUrl: './activiti-start-form.component.html',
    styleUrls: ['./activiti-form.component.css']
 })
@@ -47,13 +47,13 @@
    <div *ngSwitchCase="'upload'">
        <div *ngIf="hasFile" class="mdl-grid">
            <div *ngFor="let file of field.value" class="mdl-cell mdl-cell--6-col">
-                <activiti-content [id]="file.id" [showDocumentContent]="showDocumentContent"></activiti-content>
+                <adf-content [id]="file.id" [showDocumentContent]="showDocumentContent"></adf-content>
            </div>
        </div>
    </div>
    <div *ngSwitchCase="'document'">
        <div *ngIf="hasFile">
-            <activiti-content [id]="id" [showDocumentContent]="true"></activiti-content>
+            <adf-content [id]="id" [showDocumentContent]="true"></adf-content>
        </div>
    </div>
    <div *ngSwitchDefault
@@ -66,10 +66,10 @@ This component renders a list containing all the process instances matched by th
 **app.component.html**
 ```html
-<activiti-process-instance-list 
+<adf-process-instance-list 
    [appId]="'1'" 
    [state]="'open'">
-</activiti-process-instance-list>
+</adf-process-instance-list>
 ```
 ### Properties
@@ -109,9 +109,9 @@ The most common usage is in driving a process instance list in order to allow th
 process instances are displayed in the list.
 ```html
-<activiti-process-instance-filters
+<adf-process-instance-filters
    appId="1001">
-</activiti-process-instance-filters>
+</adf-process-instance-filters>
 ```
 ### Properties
@@ -136,9 +136,9 @@ If both `appId` and `appName` are specified then `appName` will take precedence
 ### How filter the activiti process filters
 ```html
-<activiti-process-instance-filters 
+<adf-process-instance-filters 
    [filterParam]="{index: 0}">
-</activiti-filters>
+</adf-filters>
 ```
 You can use inside the filterParam one of the following property.
@@ -170,11 +170,11 @@ The AccordionComponent is exposed by the alfresco-core.
        [heading]="'Processes'" 
        [isSelected]="true" 
        [headingIcon]="'assessment'">
-        <activiti-process-instance-filters
+        <adf-process-instance-filters
            [appId]="appId"
            (filterClick)="onProcessFilterClick($event)"
            (onSuccess)="onSuccessProcessFilterList($event)">
-        </activiti-process-instance-filters>
+        </adf-process-instance-filters>
    </adf-accordion-group>
 </adf-accordion>
 ```
@@ -187,9 +187,9 @@ Displays a button which in turn displays a dialog when clicked, allowing the use
 to specify some basic details needed to start a new process instance.
 ```html
-<activiti-start-process 
+<adf-start-process 
    appId="YOUR_APP_ID" >
-</activiti-start-process>
+</adf-start-process>
 ```
 ### Properties
@@ -213,9 +213,9 @@ to specify some basic details needed to start a new process instance.
 This component displays detailed information on a specified process instance
 ```html
-<activiti-process-instance-details 
+<adf-process-instance-details 
    processInstanceId="YOUR_PROCESS_INSTANCE_ID">
-</activiti-process-instance-details>
+</adf-process-instance-details>
 ```
 ### Properties
@@ -237,9 +237,9 @@ This component displays detailed information on a specified process instance
 This is a sub-component of the process details component, which renders some general information about the selected process.
 ```html
-<activiti-process-instance-header   
+<adf-process-instance-header   
    processInstance="localProcessDetails">
-</activiti-process-instance-details>
+</adf-process-instance-details>
 ```
 ### Properties
@@ -260,10 +260,10 @@ This is a sub-component of the process details component, which renders some gen
 Lists both the active and completed tasks associated with a particular process instance
 ```html
-<activiti-process-instance-tasks 
+<adf-process-instance-tasks 
    processInstanceId="YOUR_PROCESS_INSTANCE_ID" 
    showRefreshButton="true">
-</activiti-process-instance-tasks>
+</adf-process-instance-tasks>
 ```
 ### Properties
@@ -284,9 +284,9 @@ Lists both the active and completed tasks associated with a particular process i
 Displays comments associated with a particular process instances and allows the user to add new comments
 ```html
-<activiti-process-instance-comments 
+<adf-process-instance-comments 
    processInstanceId="YOUR_PROCESS_INSTANCE_ID">
-</activiti-process-instance-comments>
+</adf-process-instance-comments>
 ```
 ### Properties
@@ -326,11 +326,11 @@ This component displays attached documents on a specified process instance
 This component displays Upload Component(Drag and Click) to upload the attachment to a specified process instance
 ```html
-<activiti-create-process-attachment 
+<adf-create-process-attachment 
    [processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
    (error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
    (success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
-</activiti-create-process-attachment>
+</adf-create-process-attachment>
 ```
 ![process-create-attachment](docs/assets/process-create-attachment.png)
@@ -24,7 +24,7 @@ import { ActivitiProcessService } from './../services/activiti-process.service';
 declare let componentHandler: any;
@Component({
-    selector: 'activiti-process-instance-filters',
+    selector: 'adf-process-instance-filters, activiti-process-instance-filters',
    templateUrl: './activiti-filters.component.html',
    styleUrls: ['activiti-filters.component.css']
 })
@@ -26,7 +26,7 @@ declare let componentHandler: any;
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-process-instance-comments',
+    selector: 'adf-process-instance-comments, activiti-process-instance-comments',
    templateUrl: './activiti-process-comments.component.html',
    styleUrls: ['./activiti-process-comments.component.css'],
    providers: [ActivitiProcessService]
@@ -1,16 +1,16 @@
 <div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
 <div *ngIf="processInstanceDetails">
    <h2 class="mdl-card__title-text">{{ getProcessNameOrDescription('medium') }}</h2>
-    <activiti-process-instance-header
+    <adf-process-instance-header
        [processInstance]="processInstanceDetails"
        (showProcessDiagram)="onShowProcessDiagram($event)">
-    </activiti-process-instance-header>
+    </adf-process-instance-header>
    <div class="mdl-card mdl-shadow--2dp activiti-process-container">
        <div class="mdl-cell mdl-cell--12-col">
-            <activiti-process-instance-tasks
+            <adf-process-instance-tasks
                [processInstanceDetails]="processInstanceDetails"
                (taskClick)="onTaskClicked($event)">
-            </activiti-process-instance-tasks>
+            </adf-process-instance-tasks>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
@@ -26,7 +26,7 @@ import {ActivitiProcessInstanceTasks} from './activiti-process-instance-tasks.co
 import {ProcessInstance} from '../models/process-instance.model';
@Component({
-    selector: 'activiti-process-instance-details',
+    selector: 'adf-process-instance-details, activiti-process-instance-details',
    templateUrl: './activiti-process-instance-details.component.html',
    styleUrls: ['./activiti-process-instance-details.component.css']
 })
@@ -9,7 +9,7 @@
            <span class="activiti-process-header__value">{{getFormatDate(processInstance.started, 'medium')}}</span>
        </div>
        <div class="mdl-cell mdl-cell--4-col">
-            <activiti-process-instance-comments [processInstanceId]="processInstance?.id"></activiti-process-instance-comments>
+            <adf-process-instance-comments [processInstanceId]="processInstance?.id"></adf-process-instance-comments>
        </div>
        <div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="!isRunning()">
            <span class="activiti-label">{{ 'DETAILS.LABELS.ENDED' | translate }}</span>:
@@ -23,7 +23,7 @@ import { DatePipe } from '@angular/common';
 declare let componentHandler: any;
@Component({
-    selector: 'activiti-process-instance-header',
+    selector: 'adf-process-instance-header, activiti-process-instance-header',
    templateUrl: './activiti-process-instance-header.component.html',
    styleUrls: ['./activiti-process-instance-header.component.css']
 })
@@ -74,10 +74,10 @@
 <dialog *ngIf="hasStartFormDefined()" class="mdl-dialog task-details-dialog" #startDialog>
    <h4 class="mdl-dialog__title">{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
    <div class="mdl-dialog__content form__size">
-        <activiti-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
+        <adf-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
                             [showRefreshButton]="false" [readOnlyForm]="true"
                             (formContentClicked)='onFormContentClick($event)'>
-        </activiti-start-form>
+        </adf-start-form>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" (click)="closeSartDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
@@ -27,7 +27,7 @@ declare let componentHandler: any;
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-process-instance-tasks',
+    selector: 'adf-process-instance-tasks, activiti-process-instance-tasks',
    templateUrl: './activiti-process-instance-tasks.component.html',
    styleUrls: ['./activiti-process-instance-tasks.component.css']
 })
@@ -5,8 +5,8 @@
 <div *ngIf="!isListEmpty()">
-    <alfresco-datatable [data]="data" [actions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    <adf-datatable [data]="data" [actions]="true" (showRowActionsMenu)="onShowRowActionsMenu($event)"
-                        (executeRowAction)="onExecuteRowAction($event)"></alfresco-datatable>
+                        (executeRowAction)="onExecuteRowAction($event)"></adf-datatable>
 </div>
 <div *ngIf="isListEmpty()" data-automation-id="variables-none">
    {{ 'DETAILS.VARIABLES.NONE' | translate }}
@@ -102,7 +102,7 @@ describe('ActivitiProcessInstanceVariables', () => {
        fixture.detectChanges();
        fixture.whenStable();
        tick();
-        let datatable: DebugElement = fixture.debugElement.query(By.css('alfresco-datatable'));
+        let datatable: DebugElement = fixture.debugElement.query(By.css('adf-datatable'));
        expect(datatable).toBeNull();
    }));
@@ -130,7 +130,7 @@ describe('ActivitiProcessInstanceVariables', () => {
        fixture.detectChanges();
        fixture.whenStable();
        tick();
-        let datatable: DebugElement = fixture.debugElement.query(By.css('alfresco-datatable'));
+        let datatable: DebugElement = fixture.debugElement.query(By.css('adf-datatable'));
        expect(datatable).not.toBeNull();
    }));
@@ -26,7 +26,7 @@ declare let componentHandler: any;
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-process-instance-variables',
+    selector: 'adf-process-instance-variables, activiti-process-instance-variables',
    templateUrl: './activiti-process-instance-variables.component.html',
    styleUrls: [],
    providers: [ActivitiProcessService]
@@ -1,10 +1,10 @@
 <div *ngIf="!requestNode">{{ 'FILTERS.MESSAGES.NONE' | translate }}</div>
 <div *ngIf="requestNode">
    <div *ngIf="!isListEmpty()">
-        <alfresco-datatable
+        <adf-datatable
            [data]="data"
            (rowClick)="onRowClick($event)">
-        </alfresco-datatable>
+        </adf-datatable>
    </div>
    <div *ngIf="isListEmpty()">
        {{ 'PROCESSLIST.NONE' | translate }}
@@ -24,7 +24,7 @@ import { ProcessInstance } from '../models/process-instance.model';
 import { ActivitiProcessService } from '../services/activiti-process.service';
@Component({
-    selector: 'activiti-process-instance-list',
+    selector: 'adf-process-instance-list, activiti-process-instance-list',
    styleUrls: ['./activiti-processlist.component.css'],
    templateUrl: './activiti-processlist.component.html'
 })
@@ -17,9 +17,9 @@
            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" required />
            <label class="mdl-textfield__label" for="processName">{{'START_PROCESS.DIALOG.LABEL.NAME'|translate}}</label>
        </div>
-        <activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id"
+        <adf-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id"
                             (outcomeClick)="onOutcomeClick($event)">
-        </activiti-start-form>
+        </adf-start-form>
    </div>
    <div class="mdl-card__actions mdl-card--border" *ngIf="!hasStartForm()">
        <button type="button" [disabled]="!validateForm()" (click)="startProcess()" class="mdl-button" data-automation-id="btn-start">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>
@@ -27,7 +27,7 @@ declare let componentHandler: any;
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-start-process',
+    selector: 'adf-start-process, activiti-start-process',
    templateUrl: './activiti-start-process.component.html',
    styleUrls: ['./activiti-start-process.component.css']
 })
@@ -1,7 +1,7 @@
 <div class="no-attachment-message" *ngIf="isEmpty()">
    No Attachments Found
 </div>
-<alfresco-datatable *ngIf="!isEmpty()"
+<adf-datatable *ngIf="!isEmpty()"
    [rows]="attachments"
    [actions]="true"
    (rowDblClick)="openContent($event)"
@@ -12,4 +12,4 @@
        <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
        <data-column key="created" type="date" format="shortDate" title="Created On"></data-column>
    </data-columns>
-</alfresco-datatable>
+</adf-datatable>
@@ -157,7 +157,7 @@ describe('Activiti Process Instance Attachment List', () => {
        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(2);
+            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2);
        });
    }));
@@ -172,7 +172,7 @@ describe('Activiti Process Instance Attachment List', () => {
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(0);
+            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(0);
        });
    }));
@@ -69,22 +69,22 @@ npm install ng2-activiti-tasklist
 This component renders a list containing all the tasks matched by the parameters specified.
 ```html
-<activiti-tasklist 
+<adf-tasklist 
    [appId]="'1'" 
    [state]="'open'" 
    [assignment]="'assignee'">
-</activiti-tasklist>
+</adf-tasklist>
 ```
 You can also use HTML-based schema declaration like shown below:
 ```html
-<activiti-tasklist ...>
+<adf-tasklist ...>
    <data-columns>
        <data-column key="name" title="NAME" class="full-width name-column"></data-column>
        <data-column key="created" title="Created" class="hidden"></data-column>
    </data-columns>
-</activiti-tasklist>
+</adf-tasklist>
 ```
 ### DataColumn Properties
@@ -138,9 +138,9 @@ Example:
 The component shows the details of the task id passed in input
 ```html
-<activiti-task-details 
+<adf-task-details 
    [taskId]="taskId">
-</activiti-task-details>
+</adf-task-details>
 ```
 ### Properties
@@ -183,14 +183,14 @@ No Tasks
 This can be changed by adding the following custom html template:
 ```html
-<activiti-task-details [taskId]="taskId">
+<adf-task-details [taskId]="taskId">
    <no-task-details-template>
        <template>
             <h1>Sorry, no tasks here</h1>
             <img src="example.jpg">
        </template>
    </no-task-details-template>
-</activiti-task-details>    
+</adf-task-details>    
 ```
 Note that can put any HTML content as part of the template, includuing other Angualr components.
@@ -200,9 +200,9 @@ Note that can put any HTML content as part of the template, includuing other Ang
 The component shows all the available apps.
 ```html
-<activiti-apps 
+<adf-apps 
    [layoutType]="'GRID'">
-</activiti-apps>
+</adf-apps>
 ```
 ### Properties
@@ -223,12 +223,12 @@ The component shows all the available apps.
 If you want show some specific apps you can specify them through the filtersAppId parameters
 ```html
-<activiti-apps 
+<adf-apps 
    [filtersAppId]="'[
        {defaultAppId: 'tasks'}, 
        {deploymentId: '15037'}, 
        {name : 'my app name'}]'">
-</activiti-apps>
+</adf-apps>
 ```
 In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be showed
@@ -253,7 +253,7 @@ You can use inside the filter one of the following property
 The component shows all the available filters.
 ```html
-<activiti-filters></activiti-filters>
+<adf-filters></adf-filters>
 ```
 ### Properties
@@ -278,9 +278,9 @@ If both `appId` and `appName` are specified then `appName` will take precedence
 ### How filter the activiti task filters
 ```html
-<activiti-filters 
+<adf-filters 
    [filterParam]="{name:'My tasks'}">
-</activiti-filters>
+</adf-filters>
 ```
 You can use inside the filterParam one of the following property.
@@ -309,13 +309,13 @@ The AccordionComponent is exposed by the alfresco-core.
 ```html
 <adf-accordion>
    <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [headingIcon]="'assignment'">
-        <activiti-filters
+        <adf-filters
            [appId]="appId"
            [hasIcon]="false"
            (filterClick)="onTaskFilterClick($event)"
            (onSuccess)="onSuccessTaskFilterList($event)"
            #activitifilter>
-        </activiti-filters>
+        </adf-filters>
    </adf-accordion-group>
 </adf-accordion>
 ```
@@ -327,11 +327,11 @@ The AccordionComponent is exposed by the alfresco-core.
 The component shows the checklist task functionality.
 ```html
-<activiti-checklist 
+<adf-checklist 
    [readOnly]="false" 
    [taskId]="taskId" 
    [assignee]="taskAssignee.id" 
-</activiti-checklist>
+</adf-checklist>
 ```
 ### Properties
@@ -401,9 +401,9 @@ The component shows all the information related to a task.
 The purpose of the component is populate the local variable called `properties` (array of CardViewModel), with all the information that we want display.
 ```html
-<activiti-task-header
+<adf-task-header
    [taskDetails]="taskDetails">
-</activiti-task-header>
+</adf-task-header>
 ```
 ### Properties
@@ -436,11 +436,11 @@ The purpose of the component is populate the local variable called `properties`
 This component displays involved users to a specified task
 ```html
-<activiti-people 
+<adf-people 
    [people]="YOUR_INVOLVED_PEOPLE_LIST" 
    [taskId]="YOUR_TASK_ID"
    [readOnly]="YOUR_READ_ONLY_FLAG">
-</activiti-people>
+</adf-people>
 ```
 ![activiti-people](docs/assets/activiti_people.png)
@@ -26,7 +26,7 @@ import { Observable } from 'rxjs/Observable';
 declare let componentHandler: any;
@Component({
-    selector: 'activiti-apps',
+    selector: 'adf-apps, activiti-apps',
    templateUrl: 'activiti-apps.component.html',
    styleUrls: ['./activiti-apps.component.css', './activiti-apps-grid.component.css'],
    providers: [ActivitiTaskListService]
@@ -24,7 +24,7 @@ import { Observer, Observable } from 'rxjs/Rx';
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-checklist',
+    selector: 'adf-checklist, activiti-checklist',
    templateUrl: './activiti-checklist.component.html',
    styleUrls: ['./activiti-checklist.component.css'],
    providers: [ActivitiTaskListService]
@@ -24,7 +24,7 @@ import { Observer, Observable } from 'rxjs/Rx';
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-comments',
+    selector: 'adf-comments, activiti-comments',
    templateUrl: './activiti-comments.component.html',
    styleUrls: ['./activiti-comments.component.css'],
    providers: [ActivitiTaskListService]
@@ -24,7 +24,7 @@ import { FilterRepresentationModel, FilterParamsModel } from '../models/filter.m
 declare let componentHandler: any;
@Component({
-    selector: 'activiti-filters',
+    selector: 'adf-filters, activiti-filters',
    templateUrl: './activiti-filters.component.html',
    styleUrls: ['activiti-filters.component.css'],
    providers: [ActivitiTaskListService]
@@ -25,7 +25,7 @@ declare let componentHandler: any;
 declare var require: any;
@Component({
-    selector: 'activiti-people-search',
+    selector: 'adf-people-search, activiti-people-search',
    templateUrl: './activiti-people-search.component.html',
    styleUrls: ['./activiti-people-search.component.css']
 })
@@ -11,12 +11,12 @@
        </div>
    </div>
    <div class="assignment-container" *ngIf="showAssignment">
-        <activiti-people-search
+        <adf-people-search
        (searchPeople)="searchUser($event)"
        (success)="involveUser($event)"
        (closeSearch)="onCloseSearch()"
        [results]="peopleSearch$">
-        </activiti-people-search>
+        </adf-people-search>
    </div>
    <div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
        <adf-people-list
@@ -25,7 +25,7 @@ declare let componentHandler: any;
 declare var require: any;
@Component({
-    selector: 'activiti-people',
+    selector: 'adf-people, activiti-people',
    templateUrl: './activiti-people.component.html',
    styleUrls: ['./activiti-people.component.css']
 })
@@ -24,7 +24,7 @@ import { Form } from '../models/form.model';
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-start-task',
+    selector: 'adf-start-task, activiti-start-task',
    templateUrl: './activiti-start-task.component.html',
    styleUrls: ['./activiti-start-task.component.css']
 })
@@ -13,34 +13,34 @@
            <md-icon *ngIf="showHeaderContent">expand_less</md-icon>
            <span>{{taskDetails.name || 'No name'}}</span>
        </h2>
-        <activiti-task-header *ngIf="showHeaderContent"
+        <adf-task-header *ngIf="showHeaderContent"
            [taskDetails]="taskDetails"
            [formName]="taskFormName"
            (claim)="onClaimTask($event)">
-        </activiti-task-header>
+        </adf-task-header>
        <div *ngIf="showHeaderContent" class="mdl-grid">
            <div *ngIf="showInvolvePeople" class="mdl-cell mdl-cell--4-col">
                <button type="button" md-button md-raised-button (click)="showPeopleDialog()">{{'TASK_DETAILS.LABELS.INVOLVED_PEOPLE'|translate}}</button>
            </div>
            <div *ngIf="showComments" class="mdl-cell mdl-cell--4-col">
-                <activiti-comments #activiticomments
+                <adf-comments #activiticomments
                    [readOnly]="readOnlyForm"
                    [taskId]="taskDetails.id">
-                </activiti-comments>
+                </adf-comments>
            </div>
            <div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
-                <activiti-checklist #activitichecklist
+                <adf-checklist #activitichecklist
                    [readOnly]="readOnlyForm"
                    [taskId]="taskDetails.id"
                    [assignee]="taskDetails?.assignee?.id"
                    (checklistTaskCreated)="onChecklistTaskCreated($event)"
                    (checklistTaskDeleted)="onChecklistTaskDeleted($event)">
-                </activiti-checklist>
+                </adf-checklist>
            </div>
        </div>
    </div>
    <div *ngIf="isAssignedToMe()">
-        <activiti-form *ngIf="hasFormKey()" #activitiForm
+        <adf-form *ngIf="hasFormKey()" #activitiForm
            [showDebugButton]="debugMode"
            [taskId]="taskDetails.id"
            [showTitle]="showFormTitle"
@@ -54,7 +54,7 @@
            (formLoaded)='onFormLoaded($event)'
            (onError)='onFormError($event)'
            (executeOutcome)='onFormExecuteOutcome($event)'>
-        </activiti-form>
+        </adf-form>
    </div>
    <div *ngIf="!isAssignedToMe()">
        {{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }}
@@ -71,12 +71,12 @@
    </dialog>
    <dialog class="mdl-dialog people-dialog" #dialogPeople>
        <div class="mdl-dialog__content">
-            <activiti-people
+            <adf-people
                        [iconImageUrl]="peopleIconImageUrl"
                        [people]="taskPeople"
                        [readOnly]="readOnlyForm"
                        [taskId]="taskDetails.id">
-            </activiti-people>
+            </adf-people>
            <br><br>
            <button type="button" md-button md-raised-button (click)="closePeopleDialog()">{{'TASK_DETAILS.ERROR.CLOSE'|translate}}</button>
        </div>
@@ -37,7 +37,7 @@ declare var require: any;
 declare let dialogPolyfill: any;
@Component({
-    selector: 'activiti-task-details',
+    selector: 'adf-task-details, activiti-task-details',
    templateUrl: './activiti-task-details.component.html',
    styleUrls: ['./activiti-task-details.component.css']
 })
@@ -21,7 +21,7 @@ import { TaskDetailsModel } from '../models/index';
 import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
@Component({
-    selector: 'activiti-task-header',
+    selector: 'adf-task-header, activiti-task-header',
    templateUrl: './activiti-task-header.component.html',
    styleUrls: ['./activiti-task-header.component.css']
 })
@@ -1,10 +1,10 @@
 <div *ngIf="!requestNode">{{ 'TASK_FILTERS.MESSAGES.NONE' | translate }}</div>
 <div *ngIf="requestNode">
    <div *ngIf="!isListEmpty()">
-        <alfresco-datatable
+        <adf-datatable
            [data]="data"
            (rowClick)="onRowClick($event)">
-        </alfresco-datatable>
+        </adf-datatable>
    </div>
    <div *ngIf="isListEmpty()">
        {{ 'TASK_LIST.MESSAGES.NONE' | translate }}
@@ -37,7 +37,7 @@ import { ActivitiTaskListService } from './../services/activiti-tasklist.service
 import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
@Component({
-    selector: 'activiti-tasklist',
+    selector: 'adf-tasklist, activiti-tasklist',
    templateUrl: './activiti-tasklist.component.html',
    styleUrls: ['./activiti-tasklist.component.css']
 })
@@ -1,7 +1,7 @@
-<alfresco-datatable
+<adf-datatable
    [rows]="users"
    [actions]="hasActions()"
    (rowClick)="selectUser($event)"
    (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
-</alfresco-datatable>
+</adf-datatable>
@@ -1,7 +1,7 @@
 <div class="no-attachment-message" *ngIf="isEmpty()">
    No Attachments Found
 </div>
-<alfresco-datatable *ngIf="!isEmpty()"
+<adf-datatable *ngIf="!isEmpty()"
    [rows]="attachments"
    [actions]="true"
    (rowDblClick)="openContent($event)"
@@ -12,4 +12,4 @@
        <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>
        <data-column key="created" type="date" format="shortDate" title="Date"></data-column>
    </data-columns>
-</alfresco-datatable>
+</adf-datatable>
@@ -152,7 +152,7 @@ describe('TaskAttachmentList', () => {
        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(2);
+            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2);
        });
    }));
@@ -167,7 +167,7 @@ describe('TaskAttachmentList', () => {
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(0);
+            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(0);
        });
    }));
@@ -19,7 +19,7 @@ import { Directive, Input, HostListener } from '@angular/core';
 import { ContextMenuService } from './context-menu.service';
@Directive({
-    selector: '[context-menu]'
+    selector: '[adf-context-menu], [context-menu]'
 })
 export class ContextMenuDirective {
    @Input('context-menu')
@@ -20,7 +20,7 @@ import { Directive, ElementRef, AfterViewInit } from '@angular/core';
 declare var componentHandler;
@Directive({
-    selector: '[alfresco-mdl-button]'
+    selector: '[adf-mdl-button] ,[alfresco-mdl-button]'
 })
 export class AlfrescoMdlButtonDirective implements AfterViewInit {
@@ -20,7 +20,7 @@ import { Directive, ElementRef, AfterViewInit } from '@angular/core';
 declare var componentHandler;
@Directive({
-    selector: '[alfresco-mdl-menu]'
+    selector: '[adf-mdl-menu], [alfresco-mdl-menu]'
 })
 export class AlfrescoMdlMenuDirective implements AfterViewInit {
@@ -20,7 +20,7 @@ import { Directive, ElementRef, AfterViewInit } from '@angular/core';
 declare var componentHandler;
@Directive({
-    selector: '[alfresco-mdl-textfield]'
+    selector: '[adf-mdl-textfield]], [alfresco-mdl-textfield]'
 })
 export class AlfrescoMdlTextFieldDirective implements AfterViewInit {
@@ -54,9 +54,9 @@ npm install ng2-alfresco-datatable
 **app.component.html**
 ```html
-<alfresco-datatable 
+<adf-datatable 
    [data]="data">
-</alfresco-datatable>
+</adf-datatable>
 ```
 **app.component.ts**
@@ -100,7 +100,7 @@ export class DataTableDemo {
 You can also use HTML-based schema declaration like shown below:
 ```html
-<alfresco-datatable [data]="data">
+<adf-datatable [data]="data">
    <data-columns>
        <data-column key="icon" type="image" [sortable]="false"></data-column>
        <data-column key="id" title="Id"></data-column>
@@ -108,7 +108,7 @@ You can also use HTML-based schema declaration like shown below:
        <data-column key="name" title="Name" class="full-width name-column"></data-column>
        <data-column key="createdBy.name" title="Created By"></data-column>
    </data-columns>
-</alfresco-datatable>
+</adf-datatable>
 ```
 ```ts
@@ -198,7 +198,7 @@ These events are bubbled up the element tree and can be subscribed to from withi
 ```html
 <root-component (row-click)="onRowClick($event)">
    <child-component>
-        <alfresco-datatable></alfresco-datatable>
+        <adf-datatable></adf-datatable>
    </child-component>
 </root-component>
 ```
@@ -216,7 +216,7 @@ onRowClick(event) {
 You can add a template that will be showed when there are no result in your datatable:
 ```html
-<alfresco-datatable
+<adf-datatable
    [data]="data"
    [actions]="contentActions"
    [multiselect]="multiselect"
@@ -235,7 +235,7 @@ You can add a template that will be showed when there are no result in your data
            </ng-template>
        </no-content-template>
-</alfresco-datatable>
+</adf-datatable>
 ```
 ### Loading content template
@@ -243,7 +243,7 @@ You can add a template that will be showed when there are no result in your data
 You can add a template that will be showed during the loading of your data:
 ```html
-<alfresco-datatable
+<adf-datatable
    [data]="data"
    [actions]="contentActions"
    [multiselect]="multiselect"
@@ -265,7 +265,7 @@ You can add a template that will be showed during the loading of your data:
            </ng-template>
        </loading-content-template>
-</alfresco-datatable>
+</adf-datatable>
 ```
 ```js
@@ -281,7 +281,7 @@ Note: the `<loading-content-template>` and `<no-content-template>` can be used t
 It is possible assigning a custom column template like the following:
 ```html
-<alfresco-datatable ...>
+<adf-datatable ...>
    <data-columns>
        <data-column title="Version" key="properties.cm:versionLabel">
            <template let-value="value">
@@ -289,7 +289,7 @@ It is possible assigning a custom column template like the following:
            </template>
        </data-column>
    </data-columns>
-</alfresco-datatable>
+</adf-datatable>
 ```
 Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`:
@@ -433,13 +433,13 @@ then `executeRowAction` will be automatically executed when user clicks
 corresponding menu item.
 ```html
-<alfresco-datatable
+<adf-datatable
    [data]="data"
    [multiselect]="multiselect"
    [actions]="true"
    (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
-</alfresco-datatable>
+</adf-datatable>
 ```
 ```ts
@@ -19,7 +19,7 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { DataTableAdapter, DataColumn, DataRow } from '../../data/datatable-adapter';
@Component({
-    selector: 'alfresco-datatable-cell',
+    selector: 'adf-datatable-cell, alfresco-datatable-cell',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: '<ng-container>{{value}}</ng-container>'
 })
@@ -81,11 +81,11 @@
                        </div>
                        <div *ngSwitchCase="'date'" class="cell-value"
                             [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                            <adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
                        </div>
                        <div *ngSwitchCase="'text'" class="cell-value"
                             [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                            <adf-datatable-cell [data]="data" [column]="col" [row]="row"></adf-datatable-cell>
                        </div>
                    <span *ngSwitchDefault class="cell-value">
                    <!-- empty cell for unknown column type -->
@@ -30,7 +30,7 @@ import { Observable, Observer } from 'rxjs/Rx';
 declare var componentHandler;
@Component({
-    selector: 'alfresco-datatable',
+    selector: 'adf-datatable, alfresco-datatable',
    styleUrls: ['./datatable.component.css'],
    templateUrl: './datatable.component.html'
 })
@@ -20,7 +20,7 @@ import { PaginationData } from '../../models/pagination.data';
 import { Pagination } from 'alfresco-js-api';
@Component({
-    selector: 'alfresco-pagination',
+    selector: 'adf-pagination, alfresco-pagination',
    templateUrl: './pagination.component.html',
    styleUrls: ['./pagination.component.css']
 })
@@ -67,13 +67,13 @@ npm install ng2-alfresco-documentlist
 ## Document List
 ```html
-<alfresco-document-list
+<adf-document-list
    #documentList
    [currentFolderId]="'-my-'"
    [contextMenuActions]="true"
    [contentActions]="true"
    [creationMenuActions]="true">
-</alfresco-document-list>
+</adf-document-list>
 ```
 ### Properties
@@ -143,11 +143,11 @@ Here's a basic example on handling DOM events in the parent elements:
 <div (node-click)="onNodeClicked($event)" 
     (node-dblclick)="onNodeDblClicked($event)">
    <div>
-        <alfresco-upload-drag-area ...>
+        <adf-upload-drag-area ...>
-             <alfresco-document-list ...>
+             <adf-document-list ...>
                ...
-             </alfresco-document-list>
+             </adf-document-list>
-        </alfresco-upload-drag-area>
+        </adf-upload-drag-area>
    </div>
 </div>
 ```
@@ -205,9 +205,9 @@ It helps examining other valuable information you can have access to if needed:
 Typically you will be binding DocumentList properties to your application/component class properties:
 ```html
-<alfresco-document-list 
+<adf-document-list 
    [currentFolderId]="myStartFolder">
-</alfresco-document-list>
+</adf-document-list>
 ```
 with the underlying class being implemented similar to the following one:
@@ -229,10 +229,10 @@ section of the official docs.
 Here's an example of getting reference:
 ```html
-<alfresco-document-list 
+<adf-document-list 
    #documentList
    [currentFolderId]="myStartFolder">
-</alfresco-document-list>
+</adf-document-list>
 ```
 Note the `#documentList` ID we've just added to be able referencing this component later on.
@@ -282,7 +282,7 @@ DocumentList provides simple breadcrumb element to indicate the current position
 </adf-breadcrumb>
 ```
-***Note:*** the `<alfresco-document-list-breadcrumb>` and `<adf-breadcrumb>` are the same component you can still use the old tag name
+***Note:*** the `<adf-document-list-breadcrumb>` and `<adf-breadcrumb>` are the same component you can still use the old tag name
 ![Breadcrumb](docs/assets/breadcrumb.png)
@@ -306,9 +306,9 @@ DocumentList provides simple breadcrumb element to indicate the current position
 DocumentList provides simple creation menu actions that provide the action to create a new folder.
 ```html
-<alfresco-document-menu-action 
+<adf-document-menu-action 
    [folderId]="folderId">
-</alfresco-document-menu-action>
+</adf-document-menu-action>
 ```
 ![Creation Menu Action](docs/assets/document-list-creation-menu-actions-1.png)
@@ -326,7 +326,7 @@ By default special `$thumbnail` and `displayName` columns are rendered.
 A custom set of columns can look like the following:
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-columns>
        <content-column key="$thumbnail" type="image"></content-column>
        <content-column 
@@ -350,7 +350,7 @@ A custom set of columns can look like the following:
            class="desktop-only">
        </content-column>
    </content-columns>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ![Custom columns](docs/assets/custom-columns.png)
@@ -358,7 +358,7 @@ A custom set of columns can look like the following:
 You can also use HTML-based schema declaration used by DataTable, TaskList and other components:
 ```html
-<alfresco-datatable [data]="data" ...>
+<adf-datatable [data]="data" ...>
    <data-columns>
        <data-column type="image" key="icon" [sortable]="false"></data-column>
        <data-column key="id" title="Id"></data-column>
@@ -366,7 +366,7 @@ You can also use HTML-based schema declaration used by DataTable, TaskList and o
        <data-column key="name" title="Name" class="full-width name-column"></data-column>
        <data-column key="createdBy.name" title="Created By"></data-column>
    </data-columns>
-</alfresco-datatable>
+</adf-datatable>
 ```
 ### DataColumn Properties
@@ -415,7 +415,7 @@ createdByUser.displayName
 Here's a short example:
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-columns>
        <content-column key="$thumbnail" type="image"></content-column>
        <content-column title="Name" key="name" class="full-width ellipsis-cell"></content-column>
@@ -424,7 +424,7 @@ Here's a short example:
            key="createdByUser.displayName">
        </content-column>
    </content-columns>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ## Column definition
@@ -513,7 +513,7 @@ In the Example below will add the [ng2-alfresco-tag](https://www.npmjs.com/packa
    sortable="true"
    class="full-width ellipsis-cell">
    <template let-entry="$implicit">
-        <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
+        <adf-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></adf-tag-node-list>
    </template>
 </content-column>
 ```
@@ -529,7 +529,7 @@ You can define both folder and document actions at the same time.
 #### Menu actions
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-actions>
        <content-action
@@ -545,7 +545,7 @@ You can define both folder and document actions at the same time.
        </content-action>
    </content-actions>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ```ts
@@ -581,7 +581,7 @@ The ContentActionComponent provides the event permissionEvent that is raised whe
 You can subscribe to this event from your component and use the NotificationService to show a message.
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-actions>
        <content-action
@@ -593,7 +593,7 @@ You can subscribe to this event from your component and use the NotificationServ
        </content-action>
    </content-actions>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ```ts
@@ -615,7 +615,7 @@ The ContentActionComponent provides the property permission that must contain th
 you want see the button disabled.
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-actions>
        <content-action
@@ -627,7 +627,7 @@ The ContentActionComponent provides the property permission that must contain th
        </content-action>
    </content-actions>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ![Delete disable action button](docs/assets/content-action-disable-delete-button.png)
@@ -637,7 +637,7 @@ The ContentActionComponent provides the property permission that must contain th
 Initiates download of the corresponding document file.
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-actions>
        <content-action
@@ -647,7 +647,7 @@ Initiates download of the corresponding document file.
        </content-action>
    </content-actions>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ![Download document action](docs/assets/document-action-download.png)
@@ -657,7 +657,7 @@ Initiates download of the corresponding document file.
 Folder actions have the same declaration as document actions except ```taget="folder"``` attribute value.
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-actions>
        <content-action
@@ -673,7 +673,7 @@ Folder actions have the same declaration as document actions except ```taget="fo
        </content-action>
    </content-actions>
-</alfresco-document-list>
+</adf-document-list>
 ```
 ```ts
@@ -705,7 +705,7 @@ Enabling context menu is very simple:
@Component({
    selector: 'my-view',
    template: `
-        <alfresco-document-list>...</alfresco-document-list>
+        <adf-document-list>...</adf-document-list>
        <context-menu-holder></context-menu-holder>
    `
 })
@@ -730,9 +730,9 @@ The following navigation modes are supported:
 The following example switches navigation to single clicks:
 ```html
-<alfresco-document-list 
+<adf-document-list 
    [navigationMode]="'click'">
-</alfresco-document-list>
+</adf-document-list>
 ```
 ### Events
@@ -766,9 +766,9 @@ _Note that for the sake of simplicity the example code below was reduced to the
 **View1.component.html**
 ```html
-<alfresco-document-list 
+<adf-document-list 
    [rowFilter]="folderFilter">
-</alfresco-document-list>
+</adf-document-list>
 ```
 **View1.component.ts**
@@ -818,7 +818,7 @@ _Note that for the sake of simplicity the example code below was reduced to the
 **View1.component.html**
 ```html
-<alfresco-document-list 
+<adf-document-list 
    [imageResolver]="folderImageResolver">
    <content-columns>
@@ -826,7 +826,7 @@ _Note that for the sake of simplicity the example code below was reduced to the
    </content-columns>
-</alfresco-document-list>
+</adf-document-list>
 ```
 **View1.component.ts**
@@ -882,7 +882,7 @@ You can hide columns on small screens by means of custom CSS rules:
 Now you can declare columns and assign `desktop-only` class where needed:
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-columns>
        <!-- always visible columns -->
@@ -909,7 +909,7 @@ Now you can declare columns and assign `desktop-only` class where needed:
                class="desktop-only">
        </content-column>
    </content-columns>
-</alfresco-document-list>
+</adf-document-list>
 ```
 **Desktop View**
@@ -929,13 +929,13 @@ By default DocumentList provides the following content for the empty folder:
 This can be changed by means of the custom html template:
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <empty-folder-content>
        <template>
            <h1>Sorry, no content here</h1>
        </template>
    </empty-folder-content>
-</alfresco-document-list>
+</adf-document-list>
 ```
 That will give the following output:
@@ -954,7 +954,7 @@ Example below demonstrates how a new action handler can be registered with the
 `DocumentActionsService`.
 ```html
-<alfresco-document-list ...>
+<adf-document-list ...>
    <content-actions>
        <content-action
@@ -964,7 +964,7 @@ Example below demonstrates how a new action handler can be registered with the
        </content-action>
    </content-actions>
-</alfresco-document-list>
+</adf-document-list>
 ```
 You register custom handler called `my-handler` that will be executing `myDocumentActionHandler`
@@ -1,11 +1,11 @@
-<alfresco-document-menu-action
+<adf-document-menu-action
    *ngIf="creationMenuActions"
    [folderId]="currentFolderId"
    (success)="onActionMenuSuccess($event)"
    (error)="onActionMenuError($event)"
    (permissionErrorEvent)="onPermissionError($event)">
-</alfresco-document-menu-action>
+</adf-document-menu-action>
-<alfresco-datatable
+<adf-datatable
    [selectionMode]="selectionMode"
    [data]="data"
    [actions]="contentActions"
@@ -47,11 +47,11 @@
            </ng-template>
        </loading-content-template>
    </div>
-</alfresco-datatable>
+</adf-datatable>
-<alfresco-pagination *ngIf="isPaginationEnabled()"
+<adf-pagination *ngIf="isPaginationEnabled()"
                     (changePageSize)="onChangePageSize($event)"
                     (nextPage)="onNextPage($event)"
                     (prevPage)="onPrevPage($event)"
                     [pagination]="pagination"
                     [supportedPageSizes]="[5, 10, 15, 20]">
-</alfresco-pagination>
+</adf-pagination>
@@ -39,7 +39,7 @@ import { NodeEntityEvent, NodeEntryEvent } from './node.event';
 declare var require: any;
@Component({
-    selector: 'alfresco-document-list',
+    selector: 'adf-document-list, alfresco-document-list',
    styleUrls: ['./document-list.component.css'],
    templateUrl: './document-list.component.html'
 })
@@ -28,7 +28,7 @@ declare let dialogPolyfill: any;
 const ERROR_FOLDER_ALREADY_EXIST = 409;
@Component({
-    selector: 'alfresco-document-menu-action',
+    selector: 'adf-document-menu-action, alfresco-document-menu-action',
    styleUrls: ['./document-menu-action.component.css'],
    templateUrl: './document-menu-action.component.html'
 })
@@ -46,11 +46,11 @@ This component allow to authenticate to Alfresco One and Alfresco Activiti.
 **app.component.html**
 ```html
-<alfresco-login 
+<adf-login 
    [providers]="'ALL'"
    (onSuccess)="mySuccessMethod($event)"
    (onError)="myErrorMethod($event)">
-</alfresco-login>
+</adf-login>
 ```
 **app.component.ts**
@@ -97,9 +97,9 @@ export class AppComponent {
 You can replace the entire content in the footer of the login component with your custom content.
 ```html
-<alfresco-login ...>
+<adf-login ...>
    <login-footer><template>My custom HTML for the footer</template></login-footer>
-</alfresco-login>`
+</adf-login>`
 ```
 ## Change header content
@@ -109,9 +109,9 @@ You can replace the entire content in the footer of the login component with you
 You can replace the entire content in the header of the login component with your custom content.
 ```html
-<alfresco-login ...>
+<adf-login ...>
    <login-header><template>My custom HTML for the header</template></login-header>
-</alfresco-login>`
+</adf-login>`
 ```
 ## Extra content
@@ -120,11 +120,11 @@ You can put additional html content between `alfresco-login` tags to get it rend
 This becomes handy in case you need extending it with custom input fields handled by your application or parent component:
 ```html
-<alfresco-login ...>
+<adf-login ...>
    <div>
        <div>You extra content</div>
    </div>
-</alfresco-login>
+</adf-login>
 ```
 Here's an example of custom content:
@@ -136,10 +136,10 @@ Here's an example of custom content:
 It is possible changing logo and background images to custom values.
 ```html
-<alfresco-login 
+<adf-login 
    [backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
    [logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'">
-</alfresco-login>
+</adf-login>
 ```
 Should give you something like the following:
@@ -149,10 +149,10 @@ Should give you something like the following:
 Alternatively you can bind to your component properties and provide values dynamically if needed:
 ```html
-<alfresco-login
+<adf-login
    [backgroundImageUrl]="myCustomBackground"
    [logoImageUrl]="myCustomLogo">
-</alfresco-login>
+</adf-login>
 ```
 ## Customize Validation rules
@@ -163,10 +163,10 @@ form. You can add/modify the default rules of the login form.
 **MyCustomLogin.component.html**
 ```html
-<alfresco-login 
+<adf-login 
    [fieldsValidation]="customValidation"
    #alfrescologin>
-</alfresco-login>
+</adf-login>
 ```
 **MyCustomLogin.component.ts**
@@ -207,10 +207,10 @@ Alternatively you may want just running additional code without suppressing defa
 **MyCustomLogin.component.html**
 ```html
-<alfresco-login 
+<adf-login 
    (executeSubmit)="validateForm($event)" 
    #alfrescologin>
-</alfresco-login>
+</adf-login>
 ```
 **MyCustomLogin.component.ts**
@@ -36,7 +36,7 @@ enum LoginSteps {
 }
@Component({
-    selector: 'alfresco-login',
+    selector: 'adf-login, alfresco-login',
    templateUrl: './alfresco-login.component.html',
    styleUrls: ['./alfresco-login.component.css'],
    host: {'(blur)': 'onBlur($event)'}
@@ -37,13 +37,13 @@ npm install ng2-alfresco-search
 ## Basic usage
 ```html
-<alfresco-search-control 
+<adf-search-control 
    [searchTerm]="searchTerm"
    inputType="search"
    (searchChange)="onSearchChange($event);"
    (searchSubmit)="onSearchSubmit($event);"
    (fileSelect)="onSearchResultSelect($event);">
-</alfresco-search-control>
+</adf-search-control>
 ```
 Example of an component that uses the search control. In this example the search term is simply logged to the console
@@ -76,9 +76,9 @@ results component embedded inside the same component.
 ## Basic usage Search results
 ```html
-<alfresco-search 
+<adf-search 
    [searchTerm]="searchTerm">
-</alfresco-search>
+</adf-search>
 ```
 Example of an component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
@@ -24,7 +24,7 @@ import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.servi
 declare var require: any;
@Component({
-    selector: 'alfresco-search-autocomplete',
+    selector: 'adf-search-autocomplete, alfresco-search-autocomplete',
    templateUrl: './alfresco-search-autocomplete.component.html',
    styleUrls: ['./alfresco-search-autocomplete.component.css']
 })
@@ -22,7 +22,7 @@
        </div>
    </div>
 </form>
-<alfresco-search-autocomplete #autocomplete *ngIf="liveSearchEnabled"
+<adf-search-autocomplete #autocomplete *ngIf="liveSearchEnabled"
                              [searchTerm]="liveSearchTerm"
                              [rootNodeId]="liveSearchRoot"
                              [resultType]="liveSearchResultType"
@@ -32,4 +32,4 @@
                              (fileSelect)="onFileClicked($event)"
                              (searchFocus)="onAutoCompleteFocus($event)"
                              (scrollBack)="onAutoCompleteReturn($event)"
-                              (cancel)="onAutoCompleteCancel($event)"></alfresco-search-autocomplete>
+                              (cancel)="onAutoCompleteCancel($event)"></adf-search-autocomplete>
@@ -165,13 +165,13 @@ describe('AlfrescoSearchControlComponent', () => {
        it('should display a find-as-you-type control by default', () => {
            fixture.detectChanges();
-            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            let autocomplete: Element = element.querySelector('adf-search-autocomplete');
            expect(autocomplete).not.toBeNull();
        });
        it('should make find-as-you-type control hidden initially', () => {
            fixture.detectChanges();
-            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            let autocomplete: Element = element.querySelector('adf-search-autocomplete');
            expect(autocomplete.classList.contains('active')).toBe(false);
        });
@@ -180,7 +180,7 @@ describe('AlfrescoSearchControlComponent', () => {
            inputEl.dispatchEvent(new FocusEvent('focus'));
            window.setTimeout(() => { // wait for debounce() to complete
                fixture.detectChanges();
-                let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+                let autocomplete: Element = element.querySelector('adf-search-autocomplete');
                expect(autocomplete.classList.contains('active')).toBe(true);
                done();
            }, 100);
@@ -192,7 +192,7 @@ describe('AlfrescoSearchControlComponent', () => {
            inputEl.dispatchEvent(new FocusEvent('blur'));
            window.setTimeout(() => {
                fixture.detectChanges();
-                let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+                let autocomplete: Element = element.querySelector('adf-search-autocomplete');
                expect(autocomplete.classList.contains('active')).toBe(false);
                done();
            }, 100);
@@ -210,7 +210,7 @@ describe('AlfrescoSearchControlComponent', () => {
            component.onAutoCompleteFocus(new FocusEvent('focus'));
            window.setTimeout(() => { // wait for debounce() to complete
                fixture.detectChanges();
-                let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+                let autocomplete: Element = element.querySelector('adf-search-autocomplete');
                expect(autocomplete.classList.contains('active')).toBe(true);
                done();
            }, 100);
@@ -223,7 +223,7 @@ describe('AlfrescoSearchControlComponent', () => {
                key: 'Escape'
            }));
            fixture.detectChanges();
-            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            let autocomplete: Element = element.querySelector('adf-search-autocomplete');
            expect(autocomplete.classList.contains('active')).toBe(false);
        });
@@ -237,7 +237,7 @@ describe('AlfrescoSearchControlComponent', () => {
                key: 'ArrowDown'
            }));
            fixture.detectChanges();
-            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            let autocomplete: Element = element.querySelector('adf-search-autocomplete');
            expect(autocomplete.classList.contains('active')).toBe(true);
        });
@@ -280,7 +280,7 @@ describe('AlfrescoSearchControlComponent', () => {
        it('should NOT display a find-as-you-type control when configured not to', () => {
            fixture.componentInstance.liveSearchEnabled = false;
            fixture.detectChanges();
-            let autocomplete: Element = element.querySelector('alfresco-search-autocomplete');
+            let autocomplete: Element = element.querySelector('adf-search-autocomplete');
            expect(autocomplete).toBeNull();
        });
@@ -23,7 +23,7 @@ import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocompl
 import { SearchTermValidator } from './../forms/search-term-validator';
@Component({
-    selector: 'alfresco-search-control',
+    selector: 'adf-search-control, alfresco-search-control',
    templateUrl: './alfresco-search-control.component.html',
    styleUrls: ['./alfresco-search-control.component.css']
 })
@@ -2,7 +2,7 @@
     class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <p data-automation-id="search_error_message" *ngIf="errorMessage">{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</p>
    <div class="container">
-        <alfresco-document-list
+        <adf-document-list
            [node]="nodeResults"
            [contextMenuActions]="true"
            [creationMenuActions]="false"
@@ -64,14 +64,14 @@
                    handler="delete">
                </content-action>
            </content-actions>
-        </alfresco-document-list>
+        </adf-document-list>
-        <alfresco-pagination
+        <adf-pagination
            (changePageSize)="onChangePageSize($event)"
            (nextPage)="onNextPage($event)"
            (prevPage)="onPrevPage($event)"
            [pagination]="pagination"
            [maxItems]="maxResults"
            [supportedPageSizes]="[5, 10, 15, 20]">
-        </alfresco-pagination>
+        </adf-pagination>
    </div>
 </div>
@@ -22,7 +22,7 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { NodePaging, Pagination } from 'alfresco-js-api';
@Component({
-    selector: 'alfresco-search',
+    selector: 'adf-search, alfresco-search',
    styleUrls: ['./alfresco-search.component.css'],
    templateUrl: './alfresco-search.component.html'
 })
@@ -45,9 +45,9 @@ In this component are present three different tags:
 ## alfresco-tag-node-actions-list
 ```html
-<alfresco-tag-node-actions-list 
+<adf-tag-node-actions-list 
    [nodeId]="nodeId">
-</alfresco-tag-node-actions-list>
+</adf-tag-node-actions-list>
 ```  
 ### Properties
@@ -61,9 +61,9 @@ In this component are present three different tags:
 ## alfresco-tag-node-list
 ```html
-<alfresco-tag-node-list 
+<adf-tag-node-list 
    [nodeId]="nodeId">
-</alfresco-tag-node-list>
+</adf-tag-node-list>
 ``` 
 ### Properties
@@ -27,7 +27,7 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 */
@Component({
-    selector: 'alfresco-tag-node-actions-list',
+    selector: 'adf-tag-node-actions-list, alfresco-tag-node-actions-list',
    templateUrl: './tag-actions.component.html',
    styleUrls: ['./tag-actions.component.css']
 })
@@ -26,7 +26,7 @@ import { TagService } from '../services/tag.service';
 */
@Component({
-    selector: 'alfresco-tag-list',
+    selector: 'adf-tag-list, alfresco-tag-list',
    templateUrl: './tag-list.component.html'
 })
 export class TagList {
@@ -26,7 +26,7 @@ import { TagService } from '../services/tag.service';
 */
@Component({
-    selector: 'alfresco-tag-node-list',
+    selector: 'adf-tag-node-list, alfresco-tag-node-list',
    templateUrl: './tag-node-list.component.html',
    styleUrls: ['./tag-node-list.component.css']
 })
@@ -64,14 +64,14 @@ npm install ng2-alfresco-upload
 ## UploadButtonComponent
 ```html
-<alfresco-upload-button 
+<adf-upload-button 
    [rootFolderId]="-my-"
    [uploadFolders]="true"
    [multipleFiles]="false"
    [acceptedFilesType]=".jpg,.gif,.png,.svg"
    [versioning]="false"
    (onSuccess)="customMethod($event)">
-</alfresco-upload-button>
+</adf-upload-button>
 <file-uploading-dialog></file-uploading-dialog>
 ```
@@ -105,10 +105,10 @@ The UploadButtonComponent provides the event permissionEvent that is raised when
 You can subscribe to this event from your component and use the NotificationService to show a message.
 ```html
-<alfresco-upload-button
+<adf-upload-button
    [rootFolderId]="currentFolderId"
    (permissionEvent)="onUploadPermissionFailed($event)">
-</alfresco-upload-button>
+</adf-upload-button>
 ```
 ```ts
@@ -131,10 +131,10 @@ You can easily disable the button when the user doesn't own the permission to pe
 The UploadButtonComponent provides the property disableWithNoPermission that can be true. In this way the button should be disabled if the delete permission is missing for the node.
 ```html
-<alfresco-upload-button
+<adf-upload-button
    [rootFolderId]="currentFolderId"
    [disableWithNoPermission]="true">
-</alfresco-upload-button>
+</adf-upload-button>
 ```
 ![Upload disable button](docs/assets/upload-disable-button.png)
@@ -144,11 +144,11 @@ The UploadButtonComponent provides the property disableWithNoPermission that can
 This component, provide a drag and drop are to upload files to alfresco.
 ```html
-<alfresco-upload-drag-area (onSuccess)="customMethod($event)">
+<adf-upload-drag-area (onSuccess)="customMethod($event)">
    <div style="width: 200px; height: 100px; border: 1px solid #888888">
        DRAG HERE
    </div>
-</alfresco-upload-drag-area>
+</adf-upload-drag-area>
 <file-uploading-dialog></file-uploading-dialog>
 ```
@@ -15,6 +15,6 @@
        </div>
    </div>
    <div class="body-dialog" *ngIf="filesUploadingList"  [ngClass]="{hide: isDialogMinimized}">
-        <alfresco-file-uploading-list [files]="filesUploadingList"></alfresco-file-uploading-list>
+        <adf-file-uploading-list [files]="filesUploadingList"></adf-file-uploading-list>
    </div>
 </div>
@@ -20,7 +20,7 @@ import { FileModel, FileUploadStatus } from '../models/file.model';
 import { UploadService } from '../services/upload.service';
@Component({
-    selector: 'alfresco-file-uploading-list',
+    selector: 'adf-file-uploading-list, alfresco-file-uploading-list',
    templateUrl: './file-uploading-list.component.html',
    styleUrls: ['./file-uploading-list.component.css']
 })
@@ -24,7 +24,7 @@ import { FileModel } from '../models/file.model';
 import { PermissionModel } from '../models/permissions.model';
@Component({
-    selector: 'alfresco-upload-button',
+    selector: 'adf-upload-button, alfresco-upload-button',
    templateUrl: './upload-button.component.html',
    styleUrls: ['./upload-button.component.css']
 })
@@ -21,7 +21,7 @@ import { UploadService } from '../services/upload.service';
 import { FileModel } from '../models/file.model';
@Component({
-    selector: 'alfresco-upload-drag-area',
+    selector: 'adf-upload-drag-area, alfresco-upload-drag-area',
    templateUrl: './upload-drag-area.component.html',
    styleUrls: ['./upload-drag-area.component.css']
 })
@@ -33,7 +33,7 @@ npm install ng2-alfresco-userinfo
 ## Basic usage
 ```html
-<ng2-alfresco-userinfo></ng2-alfresco-userinfo>
+<adf-userinfo></adf-userinfo>
 ```
 ### Properties
@@ -26,7 +26,7 @@ declare let componentHandler: any;
 declare var require: any;
@Component({
-    selector: 'ng2-alfresco-userinfo',
+    selector: 'adf-userinfo, ng2-alfresco-userinfo',
    styleUrls: ['./user-info.component.css'],
    templateUrl: './user-info.component.html'
 })
@@ -41,20 +41,20 @@ npm install ng2-alfresco-viewer
 Using with node id:
 ```html
-<alfresco-viewer 
+<adf-viewer 
    [showViewer]="true" 
    [overlayMode]="true" 
    [fileNodeId]="'d367023a-7ebe-4f3a-a7d0-4f27c43f1045'">
-</alfresco-viewer>
+</adf-viewer>
 ```
 Using with file url:
 ```html
-<alfresco-viewer 
+<adf-viewer 
    [overlayMode]="true" 
    [urlFile]="'filename.pdf'">
-</alfresco-viewer>
+</adf-viewer>
 ```
 ## Properties
@@ -91,7 +91,7 @@ If you want handle other file formats that are not yet supported by the ng2-alfr
 Below you can find an example where with the use of `extension-viewer` if you can handle 3d files
 ```html
-<alfresco-viewer 
+<adf-viewer 
    [(showViewer)]="fileShowed"
    [fileNodeId]="fileNodeId"
    [overlayMode]="true">
@@ -105,7 +105,7 @@ Below you can find an example where with the use of `extension-viewer` if you ca
        </template>
    </extension-viewer>
-</alfresco-viewer> 
+</adf-viewer> 
 ```
 Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make example above work.
@@ -113,7 +113,7 @@ Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to
 It is possible to define multiple `extension-viewer` templates:
 ```html
-<alfresco-viewer 
+<adf-viewer 
    [(showViewer)]="fileShowed"
    [fileNodeId]="fileNodeId"
    [overlayMode]="true">
@@ -133,7 +133,7 @@ It is possible to define multiple `extension-viewer` templates:
            </my-custom-txt-component>
        </template>
    </extension-viewer>
-</alfresco-viewer> 
+</adf-viewer> 
 ```
 ## Build from sources
@@ -21,7 +21,7 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
@Component({
-    selector: 'alfresco-viewer',
+    selector: 'adf-viewer, alfresco-viewer',
    templateUrl: './viewer.component.html',
    styleUrls: ['./viewer.component.css']
 })
@@ -37,7 +37,7 @@ npm install ng2-alfresco-webscript
 ## Basic usage
 ```html
-<alfresco-webscript-get 
+<adf-webscript-get 
    [scriptPath]="string"
    [scriptArgs]="Object"
    [contextRoot]="string"
@@ -45,7 +45,7 @@ npm install ng2-alfresco-webscript
    [showData]="boolean"
    [contentType]="JSON | HTML | DATATABLE | TEXT"
    (onSuccess)= "logData($event)">
- </alfresco-webscript-get>
+ </adf-webscript-get>
 ```
 Another example:
@@ -53,13 +53,13 @@ Another example:
 **app.component.html**
 ```html
-<alfresco-webscript-get 
+<adf-webscript-get 
    [scriptPath]="scriptPath"
    [scriptArgs]="scriptArgs"
    [contextRoot]="contextRoot"
    [servicePath]="servicePath" 
    [contentType]="'HTML'">
-</alfresco-webscript-get>
+</adf-webscript-get>
 ```
 **app.component.ts**
@@ -97,13 +97,13 @@ This sample Web Scripts  reside in your Alfresco Server AND  you can access the
 http://localhost:8080/alfresco/service/sample/folder/Company%20Home 
 ```html
-<alfresco-webscript-get 
+<adf-webscript-get 
    [scriptPath]="scriptPath"
    [contextRoot]="'alfresco'"
    [servicePath]="'service'";
    [scriptPath]="'Sample/folder/Company%20Home'"
    [contentType]="'HTML'">
-</alfresco-webscript-get>
+</adf-webscript-get>
 ```                          
 ![Custom columns](docs/assets/HTML.png)                         
@@ -115,13 +115,13 @@ This sample demonstrates how to implement a Webscript component that renders the
 http://localhost:8080/alfresco/service/sample/folder/DATATABLE
 ```html
-<alfresco-webscript-get 
+<adf-webscript-get 
    [scriptPath]="scriptPath"
    [contextRoot]="'alfresco'"
    [servicePath]="'service'";
    [scriptPath]="'Sample/folder/DATATABLE'"
    [contentType]="'DATATABLE'">
-</alfresco-webscript-get>
+</adf-webscript-get>
 ```  
 If you want show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datatructure below:
@@ -173,7 +173,7 @@ This sample Web Scripts  reside in your Alfresco Server AND  you can access the
 http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE 
 ```html
-<alfresco-webscript-get 
+<adf-webscript-get 
    [scriptPath]="scriptPath"
    [contextRoot]="'alfresco'"
    [servicePath]="'service'";
@@ -181,7 +181,7 @@ http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE
    [contentType]="'HTML'"
    [showData]="false"
    (onSuccess)="logDataExample($event)">
-</alfresco-webscript-get>
+</adf-webscript-get>
 ``` 
 You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application
@@ -20,13 +20,13 @@ import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 /**
- * <alfresco-webscript-get [scriptPath]="string"
+ * <adf-webscript-get [scriptPath]="string"
 *                         [scriptArgs]="Object"
 *                         [contextRoot]="string"
 *                         [servicePath]="string"
 *                         [contentType]="JSON|HTML|DATATABLE"
 *                         (onSuccess)="customMethod($event)>
- * </alfresco-webscript-get>
+ * </adf-webscript-get>
 *
 * This component, provide a get webscript viewer
 *
@@ -41,7 +41,7 @@ import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 * @returns {WebscriptComponent} .
 */
@Component({
-    selector: 'alfresco-webscript-get',
+    selector: 'adf-webscript-get, alfresco-webscript-get',
    template: `
        <div *ngIf="showData">
            <div *ngIf="contentType === 'JSON'" id="webscript-data-JSON">{{data | json}}</div>
@@ -14,7 +14,7 @@
    "prepublishOnly": "npm run build",
    "pkg-build": "package-json-merge ng2-alfresco-core/package.json ng2-alfresco-datatable/package.json ng2-activiti-diagrams/package.json ng2-activiti-analytics/package.json ng2-activiti-form/package.json ng2-activiti-tasklist/package.json ng2-activiti-processlist/package.json ng2-alfresco-documentlist/package.json ng2-alfresco-login/package.json ng2-alfresco-search/package.json ng2-alfresco-tag/package.json ng2-alfresco-upload/package.json ng2-alfresco-viewer/package.json ng2-alfresco-webscript/package.json ng2-alfresco-webscript/package.json ng2-alfresco-userinfo/package.json ng2-alfresco-social/package.json package-base.json  > package.json",
    "toc": "markdown-toc -i ng2-alfresco-core/README.md && markdown-toc -i ng2-alfresco-datatable/README.md && markdown-toc -i ng2-activiti-diagrams/README.md && markdown-toc -i ng2-activiti-analytics/README.md && markdown-toc -i ng2-activiti-form/README.md && markdown-toc -i ng2-activiti-tasklist/README.md && markdown-toc -i ng2-activiti-processlist/README.md && markdown-toc -i ng2-alfresco-documentlist/README.md && markdown-toc -i ng2-alfresco-login/README.md && markdown-toc -i ng2-alfresco-search/README.md && markdown-toc -i ng2-alfresco-tag/README.md && markdown-toc -i ng2-alfresco-upload/README.md && markdown-toc -i ng2-alfresco-viewer/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-webscript/README.md && markdown-toc -i ng2-alfresco-userinfo/README.md && markdown-toc -i ng2-alfresco-social/README.md && markdown-toc -i README.md",
-    "doc": "npm run toc && npm run npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
+    "doc": "npm run toc && npm run webpack -- --config config/webpack.doc.js --progress --profile --bail",
    "tslint": "",
    "prepublish": "",
    "tsc": "",
@@ -239,14 +239,13 @@ For development environment configuration please refer to [project docs](../demo
 # npm-clean.sh
-***npm-clean.sh*** clean all the projects folder : ng2-components, ng2-components/*.*/demo and  demo-shell-ng2.
+***npm-clean.sh*** clean all the projects folder : ng2-components and  demo-shell-ng2.
 ## Options
 | Option | Description |
 | --- | --- |
 | -h or --help    | show the help  |
 | -sd or --skipDemo   | skip the demo folder clean |
 # npm-check-bundles.sh
@@ -270,8 +269,6 @@ Add a package across all the pacakge json in the project
 | -h or --help    | show the help  |
 | --save   | save it in dependencies |
 | --save-dev   | save it in dev dependencies |
 | -sd   | skip the demo projects |
 * Add a package in the project
@@ -2,7 +2,6 @@
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval EXEC_DEMO=true
 eval NAME_PKG=''
 eval SAVE_OPT=false
 eval SAVE_DEV_OPT=false
@@ -11,7 +10,6 @@ show_help() {
    echo "Usage: npm-clean.sh"
    echo "--save"
    echo "--save-dev"
    echo "-sd or -skipDemo skip the clean of the demo folder of any components"
 }
 eval projects=( "ng2-activiti-diagrams"
@@ -32,10 +30,6 @@ eval projects=( "ng2-activiti-diagrams"
      "ng2-alfresco-webscript"
      "ng2-alfresco-userinfo" )
 clea_demo() {
    EXEC_DEMO=false
 }
 save(){
    NAME_PKG=$1
    SAVE_OPT=true
@@ -51,7 +45,6 @@ while [[ $1  == -* ]]; do
      -h|--help|-\?) show_help; exit 0;;
      --save)  save $2; shift 2;;
      --save-dev)  save_dev $2; shift 2;;
      -sd|--skipDemo) clea_demo; shift;;
      -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
    esac
 done
@@ -1,74 +0,0 @@
 #!/usr/bin/env bash
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 eval EXEC_GIT_NPM_INSTALL_JSAPI=false
 eval EXEC_BUILD=true
 eval EXEC_INSTALL=true
 eval projects=(
    "ng2-alfresco-core"
    "ng2-alfresco-datatable"
    "ng2-activiti-diagrams"
    "ng2-activiti-analytics"
    "ng2-activiti-form"
    "ng2-activiti-tasklist"
    "ng2-activiti-processlist"
    "ng2-alfresco-documentlist"
    "ng2-alfresco-login"
    "ng2-alfresco-search"
    "ng2-alfresco-social"
    "ng2-alfresco-tag"
    "ng2-alfresco-social"
    "ng2-alfresco-upload"
    "ng2-alfresco-viewer"
    "ng2-alfresco-webscript"
    "ng2-alfresco-userinfo" )
 enable_js_api_git_link() {
    GIT_ISH='git://github.com/Alfresco/alfresco-js-api.git#'$1
    EXEC_GIT_NPM_INSTALL_JSAPI=true
 }
 show_help() {
    echo "Usage: npm-build-all-demo.sh"
    echo ""
    echo "-t or -test build all your local component and run also the test on them , this parameter accept also a wildecard to execute test for example -t "ng2-alfresco-core" "
    echo "-gitjsapi to build all the components against a commit-ish version of the JS-API"
 }
 exclude_build(){
    EXEC_BUILD=false
 }
 exec_install(){
    EXEC_INSTALL=false
 }
 while [[ $1 == -* ]]; do
    case "$1" in
      -h|--help|-\?) show_help; exit 0;;
      -si|--skipinstall)  exec_install; shift;;
      -sb|--skipbuild)  exclude_build; shift;;
      -gitjsapi)  enable_js_api_git_link $2; shift 2;;
      -*) echo "invalid option: $1" 1>&2; show_help; exit 1;;
    esac
 done
 cd "$DIR/../ng2-components/"
 for PACKAGE in ${projects[@]}
 do
  DESTDIR="$DIR/../ng2-components/$PACKAGE/demo"
  if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
      echo "====== Use the alfresco JS-API  '$GIT_ISH' in $PACKAGE demo ====="
      cd $DESTDIR
      npm install $GIT_ISH
      cd "$DIR/../ng2-components/$PACKAGE/demo/node_modules/alfresco-js-api"
      npm install
  fi
  cd $DESTDIR
  npm run buil:dev
 done
@@ -7,7 +7,6 @@ eval EXEC_CLEAN_DEMO=true
 show_help() {
    echo "Usage: npm-clean.sh"
    echo ""
    echo "-sd or -skipDemo skip the clean of the demo folder of any components"
 }
 eval projects=( "ng2-activiti-diagrams"
@@ -28,13 +27,9 @@ eval projects=( "ng2-activiti-diagrams"
      "ng2-alfresco-webscript"
      "ng2-alfresco-userinfo" )
 clea_demo() {
    EXEC_CLEAN_DEMO=false
 }
 while [[ $1  == -* ]]; do
    case "$1" in
      -h|--help|-\?) show_help; exit 0;;
      -sd|--skipDemo) clea_demo; shift;;
      -*) echo "invalid option: $1" 1>&2; show_help; exit 0;;
    esac
 done
@@ -46,15 +41,6 @@ do
    echo "====== clean component: ${PACKAGE} ====="
    cd "$DIR/../ng2-components/${PACKAGE}"
    npm run clean
    if $EXEC_CLEAN_DEMO == true; then
       if [ -d "$DIR/../ng2-components/${PACKAGE}/demo" ]; then
        echo "====== clean component demo: ${PACKAGE} ====="
        cd "$DIR/../ng2-components/${PACKAGE}/demo"
        npm install rimraf
        npm run clean
       fi
    fi
 done
 cd "$DIR/../demo-shell-ng2"