[ADF-3746] Add style lint rules (#3975)

* add stylelint * fix style first part * fix style second part * fix style third part * fix style fourth part * Fix e2e tests first part * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * fix insights * fix style abotu component * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * [ADF-3746] Rebase branch * Fix e2e tests second part * Rebase branch * fix style third part * fix style fourth part * Fix list error * Fix e2e tests second part * Rebase branch * Fix list error * fix new style added * tslint fix * [ADF-3746] Fix scss errors on Process Filters Cloud component
2026-09-09 18:03:21 +00:00 · 2018-11-28 14:43:18 +00:00
parent 5fc03cf26b
commit 1a21f234b6
234 changed files with 2328 additions and 1058 deletions
@@ -0,0 +1 @@
 _theming.scss
@@ -48,7 +48,8 @@ jobs:
          - npm install
          - ./scripts/lint.sh || exit 1
          - npm run spellcheck || exit 1
-          - (./scripts/smart-build.sh -b $TRAVIS_BRANCH || exit 1;);
+          - npm run stylelint || exit 1
          - rm -rf tmp && (./scripts/smart-build.sh -b $TRAVIS_BRANCH || exit 1;);
          - npm run build:dist || exit 1
        - stage: Unit test
          name: core
@@ -1,4 +1,4 @@
-router-outlet[name="overlay"] + * {
+router-outlet[name='overlay'] + * {
    width: 100%;
    height: 100%;
    z-index: 999;
@@ -1,5 +1,5 @@
 <h3>Plugins</h3>
-<div class="extension-details-container">
+<div class="adf-extension-details-container">
    <mat-table [dataSource]="extensions$ | async">
        <!-- $id Column -->
        <ng-container matColumnDef="$id">
@@ -1,3 +1,3 @@
-.extension-details-container {
+.adf-extension-details-container {
    padding: 4px;
 }
@@ -3,7 +3,7 @@
                    [position]="position">
    <adf-sidenav-layout-header>
-        <ng-template let-toggleMenu=" toggleMenu">
+        <ng-template let-toggleMenu="toggleMenu">
            <adf-layout-header id="adf-header"
                               [title]="title | translate"
@@ -45,13 +45,13 @@
                <a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate"
                   [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
                   class="adf-sidenav-link">
-                    <mat-icon matListIcon class="sidenav-menu-icon">{{link.icon}}</mat-icon>
+                    <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
-                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
+                    <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
                </a>
                <a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout"
                   class="adf-sidenav-link">
-                    <mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
+                    <mat-icon matListIcon class="adf-sidenav-menu-icon">exit_to_app</mat-icon>
-                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
+                    <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
                </a>
            </mat-nav-list>
@@ -43,16 +43,16 @@
        }
        .adf-sidenav-link {
-            &.active {
+            &.adf-active {
                color: mat-color($primary);
            }
-            .sidenav-menu-icon {
+            .adf-sidenav-menu-icon {
                margin-right: 20px;
                font-size: 14px;
            }
-            .sidenav-menu-label {
+            .adf-sidenav-menu-label {
                font-size: 14px;
                white-space: nowrap;
            }
@@ -85,7 +85,7 @@
                min-width: 0;
                line-height: $toolbarHeight;
-                &.active {
+                &.adf-active {
                    background-color: rgba(0, 0, 0, 0.12);
                }
            }
@@ -98,7 +98,7 @@
        }
        .adf-menu {
-            padding-top: 0px;
+            padding-top: 0;
        }
    }
@@ -8,7 +8,7 @@
    <h2>1. Standalone (fixed size)</h2>
    <small>Component is used in the fixed-width layout</small>
-    <div class="breadcrumb-container-restricted">
+    <div class="adf-breadcrumb-container-restricted">
        <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
        </adf-breadcrumb>
    </div>
@@ -57,7 +57,7 @@
        Buttons do nothing and are present for layout purposes.
    </small>
-    <adf-toolbar class="full-content-toolbar">
+    <adf-toolbar class="adf-full-content-toolbar">
        <adf-toolbar-title fxFlex="0 1 auto">
            <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
            </adf-breadcrumb>
@@ -76,7 +76,7 @@
        </div>
    </adf-toolbar>
-    <div class="content">
+    <div class="adf-content">
        <adf-document-list #documentList currentFolderId="-my-">
        </adf-document-list>
    </div>
@@ -1,14 +1,14 @@
-.breadcrumb-container-restricted {
+.adf-breadcrumb-container-restricted {
    width: 800px;
    max-width: 800px;
    border: 1px solid lightgray;
 }
-.content {
+.adf-content {
    margin: 10px 0;
 }
-.full-content-toolbar {
+.adf-full-content-toolbar {
    .adf-toolbar-title {
        display: flex;
        width: 100%;
@@ -1,21 +1,21 @@
-<div class="main-content">
+<div class="adf-main-content">
    <h1>CardView Component</h1>
-    <mat-card class="card-view">
+    <mat-card class="adf-card-view">
        <adf-card-view
            [properties]="properties"
            [editable]="true">
        </adf-card-view>
    </mat-card>
-    <div class="console" #console>
+    <div class="adf-console" #console>
        <h3>Changes log:</h3>
        <p *ngFor="let log of logs">{{ log }}</p>
    </div>
 </div>
-<p class="toggle">
+<p class="adf-toggle">
    <mat-slide-toggle
        id="adf-toggle-editable"
        [color]="'primary'"
@@ -1,13 +1,13 @@
-.main-content {
+.adf-main-content {
    padding: 0 15px;
 }
-.card-view {
+.adf-card-view {
    width: 30%;
    display: inline-block;
 }
-.console {
+.adf-console {
    width: 60%;
    display: inline-block;
    vertical-align: top;
@@ -2,7 +2,7 @@
    margin: 15px;
 }
-.app-process-cloud-spacing {
+.adf-process-cloud-spacing {
    margin: 10px;
 }
@@ -8,13 +8,13 @@
                    <h2>Plain picker</h2>
                </mat-panel-title>
                <mat-panel-description>
-                    <label class="content-node-selector-demo-basic-label">
+                    <label class="adf-content-node-selector-demo-basic-label">
                        dropdownHideMyFiles: {{dropdownHideMyFiles}}
                    </label>
                </mat-panel-description>
            </mat-expansion-panel-header>
-            <div class="content-node-selector-demo-basic-table">
+            <div class="adf-content-node-selector-demo-basic-table">
                <adf-content-node-selector-panel
                    [currentFolderId]="'-root-'">
                </adf-content-node-selector-panel>
@@ -26,13 +26,13 @@
                    <h2>Hide My files</h2>
                </mat-panel-title>
                <mat-panel-description>
-                    <label class="content-node-selector-demo-basic-label">
+                    <label class="adf-content-node-selector-demo-basic-label">
                        My Files site will be hided from dropdown
                    </label>
                </mat-panel-description>
            </mat-expansion-panel-header>
-            <div class="content-node-selector-demo-basic-table">
+            <div class="adf-content-node-selector-demo-basic-table">
                <adf-content-node-selector-panel
                    [currentFolderId]="'-root-'"
                    [dropdownHideMyFiles]="true">
@@ -45,7 +45,7 @@
                    <h2>Custom Site List</h2>
                </mat-panel-title>
                <mat-panel-description>
-                    <label class="content-node-selector-demo-basic-label">
+                    <label class="adf-content-node-selector-demo-basic-label">
                        Adding a custom site list
                    </label>
                </mat-panel-description>
@@ -54,7 +54,7 @@
            <div>
                <mat-list>
                    <h3 mat-subheader>Add Site</h3>
-                    <form class="content-node-selector-demo-example-form">
+                    <form class="adf-content-node-selector-demo-example-form">
                        <mat-form-field>
                            <label>Site Guid</label>
                            <input matInput [(ngModel)]="customSideGuid" [ngModelOptions]="{standalone: true}">
@@ -79,7 +79,7 @@
            </div>
-            <div class="content-node-selector-demo-basic-table">
+            <div class="adf-content-node-selector-demo-basic-table">
                <adf-content-node-selector-panel
                    [currentFolderId]="'-root-'"
                    [dropdownSiteList]="customSites">
@@ -92,7 +92,7 @@
                        <h2>Row Filtering</h2>
                    </mat-panel-title>
                    <mat-panel-description>
-                        <label class="content-node-selector-demo-basic-label">
+                        <label class="adf-content-node-selector-demo-basic-label">
                            Will automatically filter the row on the list
                        </label>
                    </mat-panel-description>
@@ -105,7 +105,7 @@
                    Slide Folders
                </mat-slide-toggle>
-                <div class="content-node-selector-demo-basic-table">
+                <div class="adf-content-node-selector-demo-basic-table">
                    <adf-content-node-selector-panel
                        [rowFilter]="rowFilterFunction"
                        [currentFolderId]="'-root-'">
@@ -118,7 +118,7 @@
                        <h2>Custom Image Resolving</h2>
                    </mat-panel-title>
                    <mat-panel-description>
-                        <label class="content-node-selector-demo-basic-label">
+                        <label class="adf-content-node-selector-demo-basic-label">
                            A function to manage the way folder/file icons and thumbnails are resolved
                        </label>
                    </mat-panel-description>
@@ -128,7 +128,7 @@
                    Add Custom Images Resolver
                </mat-slide-toggle>
-                <div class="content-node-selector-demo-basic-table">
+                <div class="adf-content-node-selector-demo-basic-table">
                    <adf-content-node-selector-panel
                        [imageResolver]="customImageResolver"
                        [currentFolderId]="'-root-'">
@@ -141,12 +141,12 @@
                    <h2>Set Page Size</h2>
                </mat-panel-title>
                <mat-panel-description>
-                    <label class="content-node-selector-demo-basic-label">
+                    <label class="adf-content-node-selector-demo-basic-label">
                        Number of items shown per page in the list. actual page {{actualPageSize}}
                    </label>
                </mat-panel-description>
            </mat-expansion-panel-header>
-            <div class="content-node-selector-demo-basic-table">
+            <div class="adf-content-node-selector-demo-basic-table">
                <adf-content-node-selector-panel
                    [currentFolderId]="'-root-'"
                    [pageSize]="actualPageSize"
@@ -160,14 +160,14 @@
                    <h2>Is Valid Selection Function </h2>
                </mat-panel-title>
                <mat-panel-description>
-                    <label class="content-node-selector-demo-basic-label">
+                    <label class="adf-content-node-selector-demo-basic-label">
                        Function used to decide if the selected node has permission to be selected
                    </label>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <label>Only folder starting with the letter 'a' or 'A' are valid selections</label>
            <label>Actual Selection is : {{validSelection}}</label>
-            <div class="content-node-selector-demo-basic-table">
+            <div class="adf-content-node-selector-demo-basic-table">
                <adf-content-node-selector-panel
                    (select)="onNodeSelect($event)"
                    [isSelectionValid]="customIsValidFunction"
@@ -181,13 +181,13 @@
                    <h2>BreadCrumb Transform Function </h2>
                </mat-panel-title>
                <mat-panel-description>
-                    <label class="content-node-selector-demo-basic-label">
+                    <label class="adf-content-node-selector-demo-basic-label">
                        Transformation to be performed on the chosen/folder node before building the breadcrumb UI
                    </label>
                </mat-panel-description>
            </mat-expansion-panel-header>
            <label>Folder starting with letter 'd' or 'D' won't be displayed in the breadcrumb dropdown</label>
-            <div class="content-node-selector-demo-basic-table">
+            <div class="adf-content-node-selector-demo-basic-table">
                <adf-content-node-selector-panel
                    [breadcrumbTransform]="customBreadcrumbFunction"
                    [currentFolderId]="'-root-'">
@@ -1,4 +1,4 @@
-.content-node-selector-demo {
+.adf-content-node-selector-demo {
    &-main {
        display: flex;
@@ -11,7 +11,7 @@
    &-basic-table {
        height:400px;
-        width:700px
+        width:700px;
    }
    &-basic-label {
@@ -19,7 +19,7 @@
        <data-column type="image" key="icon" [sortable]="false"></data-column>
        <data-column key="id" title="Id"></data-column>
        <data-column key="createdOn" title="Created"></data-column>
-        <data-column key="name" title="Name" class="full-width name-column"></data-column>
+        <data-column key="name" title="Name" class="adf-full-width name-column"></data-column>
        <data-column key="createdBy.name" title="Created By"></data-column>
    </data-columns>
    -->
@@ -108,10 +108,10 @@ export class DataTableComponent {
            ],
            [
                { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
-                { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'desktop-only'},
+                { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'adf-desktop-only'},
                { type: 'text', key: 'createdOn', title: 'Created On', sortable: true },
-                { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
+                { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-full-width adf-name-column', sortable: true },
-                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: 'desktop-only'}
+                { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: 'adf-desktop-only'}
            ]
        );
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="adf-container">
    <mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
        <mat-expansion-panel  hideToggle="true">
@@ -18,9 +18,9 @@
                selectionMode="null">
                <empty-folder-content>
                    <ng-template>
-                        <div class="empty-list__block">
+                        <div class="adf-empty-list__block">
                            <mat-icon>history</mat-icon>
-                            <p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                            <p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
                        </div>
                    </ng-template>
                </empty-folder-content>
@@ -33,7 +33,7 @@
        </adf-sites-dropdown>
    </div>
-    <div id="document-list-container" class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
+    <div id="document-list-container" class="adf-document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
        <adf-upload-drag-area fxFlex="1 1 auto"
                              [disabled]="disableDragArea"
                              [acceptedFilesType]="getFileFiltering()"
@@ -42,22 +42,22 @@
                              [adf-node-permission]="'create'"
                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
                              (beginUpload)="onBeginUpload($event)">
-            <div *ngIf="errorMessage" class="error-message">
+            <div *ngIf="errorMessage" class="adf-error-message">
                <button (click)="resetError()" mat-icon-button>
                    <mat-icon>highlight_off</mat-icon>
                </button>
-                <span class="error-message--text">{{errorMessage}}</span>
+                <span class="adf-error-message--text">{{errorMessage}}</span>
            </div>
            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
                <adf-toolbar-title fxFlex="0 1 auto">
                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
-                                    class="files-breadcrumb"
+                                    class="adf-files-breadcrumb"
                                    root="APP.PERSONAL-FILES"
                                    [target]="documentList"
                                    [folderNode]="documentList.folderNode">
                    </adf-breadcrumb>
                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                                             class="files-breadcrumb"
+                                             class="adf-files-breadcrumb"
                                             [target]="documentList"
                                             [folderNode]="documentList.folderNode">
                    </adf-dropdown-breadcrumb>
@@ -215,7 +215,7 @@
                (permissionError)="handlePermissionError($event)">
                <no-permission-content *ngIf="enableCustomPermissionMessage">
                    <ng-template>
-                    <h1>Cris you don't have permissions</h1>
+                        <h1>You don't have permissions</h1>
                    </ng-template>
                </no-permission-content>
                <empty-folder-content *ngIf="disableDragArea">
@@ -230,15 +230,15 @@
                        key="$thumbnail"
                        type="image"
                        [sortable]="false"
-                        class="image-table-cell"
+                        class="adf-image-table-cell"
-                        [class.cell-thumbnail]="thumbnails">
+                        [class.adf-cell-thumbnail]="thumbnails">
                    </data-column>
                    <data-column
                        *ngIf="showNameColumn"
                        key="name"
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        [formatTooltip]="getNodeNameTooltip"
-                        class="full-width ellipsis-cell">
+                        class="adf-full-width adf-ellipsis-cell">
                    </data-column>
                    <!-- Location column demo -->
                    <!--
@@ -259,19 +259,19 @@
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                        key="id"
-                        class="full-width ellipsis-cell">
+                        class="adf-full-width adf-ellipsis-cell">
                        <ng-template let-entry="$implicit">
                            <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
                        </ng-template>
                    </data-column>
                    -->
                    <data-column
-                        class="full-width ellipsis-cell"
+                        class="adf-full-width adf-ellipsis-cell"
                        title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
                        key="id">
                    </data-column>
                    <data-column
-                        class="desktop-only"
+                        class="adf-desktop-only"
                        title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                        key="id">
                        <ng-template let-entry="$implicit">
@@ -284,14 +284,14 @@
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                        key="createdByUser.displayName"
-                        class="desktop-only">
+                        class="adf-desktop-only">
                    </data-column>
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                        key="createdAt"
                        type="date"
                        [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
-                        class="desktop-only">
+                        class="adf-desktop-only">
                    </data-column>
                </data-columns>
@@ -457,7 +457,7 @@
    <p>Current folder ID: {{ documentList.currentFolderId }}</p>
-    <div class="p-10">
+    <div class="adf-p-10">
        Selected Nodes:
        <ul>
            <li *ngFor="let node of documentList.selection">
@@ -466,7 +466,7 @@
        </ul>
    </div>
-    <div class="container">
+    <div class="adf-container">
        <section>
            <mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
                Show Name Column
@@ -620,7 +620,7 @@
        </section>
    </div>
-    <div class="p-10">
+    <div class="adf-p-10">
        <p>
            {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
        </p>
@@ -2,12 +2,12 @@
    $minimumDocumentListWidth: 900px;
    $foreground: map-get($theme, foreground);
-    .container {
+    .adf-container {
        margin: 10px !important;
    }
    @media screen and ($mat-xsmall) {
-        .container {
+        .adf-container {
            margin: 0;
        }
@@ -16,11 +16,11 @@
        }
    }
-    .error-message {
+    .adf-error-message {
        text-align: left;
    }
-    .error-message--text {
+    .adf-error-message--text {
        color: #d50000;
    }
@@ -28,11 +28,11 @@
        height: 900px;
    }
-    adf-document-list ::ng-deep adf-datatable tr.document-list__create {
+    adf-document-list ::ng-deep adf-datatable tr.adf-document-list__create {
        background: green !important;
    }
-    adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
+    adf-document-list ::ng-deep adf-datatable tr.adf-document-list__disable {
        background: red !important;
    }
@@ -79,7 +79,7 @@
            &-icon {
                display: block;
                font-size: 48px;
-                margin: 0 auto 32px auto;
+                margin: 0 auto 32px;
            }
        }
@@ -118,7 +118,7 @@
            margin-left: 20px;
        }
-        .empty-list__block {
+        .adf-empty-list__block {
            height: 100%;
            padding: 0;
            margin: 0;
@@ -152,10 +152,11 @@
            }
        }
-        adf-file-uploading-dialog ::ng-deep .upload-dialog {
+        adf-file-uploading-dialog ::ng-deep .adf-upload-dialog {
            width: 80%;
-            & ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row .adf-file-uploading-row__group {
+            & ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row
            .adf-file-uploading-row__group {
                min-width: 0;
            }
        }
@@ -1,12 +1,12 @@
 <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
 </adf-form-list>
-<div class="form-container" *ngIf="!isEmptyForm()">
+<div class="adf-form-container" *ngIf="!isEmptyForm()">
    <adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">
    </adf-form>
 </div>
 <button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
 <button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
-<section class="form-list-margin">
+<section class="adf-form-list-margin">
    <mat-slide-toggle color="primary" [(ngModel)]="showValidationIcon">
        Show Validation Icon
    </mat-slide-toggle>
@@ -1,12 +1,12 @@
-.form-container {
+.adf-form-container {
    padding: 10px;
 }
-.store-form-container{
+.adf-store-form-container {
    width: 80%;
    height: 80%;
 }
-.form-list-margin {
+.adf-form-list-margin {
    margin-left: 26px;
 }
@@ -1,4 +1,4 @@
-<div class="form-container">
+<div class="adf-form-container">
    <mat-accordion>
        <mat-expansion-panel>
            <mat-expansion-panel-header>
@@ -1,3 +1,3 @@
-.form-container {
+.adf-form-container {
    padding: 10px;
 }
@@ -2,7 +2,7 @@
    <mat-tab-group>
        <mat-tab label="Form">
-            <div class="form-container">
+            <div class="adf-form-container">
                <adf-form
                    [showRefreshButton]="false"
                    [form]="form"
@@ -10,7 +10,7 @@
                </adf-form>
            </div>
-            <div class="console" #console>
+            <div class="adf-console" #console>
                <h3>Error log:</h3>
                <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
                    translate}}</p>
@@ -24,7 +24,7 @@
                [(ngModel)]="formConfig"
                (onInit)="onInitFormEditor($event)">
            </ngx-monaco-editor>
-            <div class="form-editor-buttons">
+            <div class="adf-form-editor-buttons">
                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
                    form config
                </button>
@@ -32,7 +32,7 @@
                    form config
                </button>
            </div>
-            <div class="upload-config-button">
+            <div class="adf-upload-config-button">
                <a mat-raised-button color="primary" >
                    <mat-icon>file_upload</mat-icon>
                    <label for="upload-config-file">Upload JSON File</label>
@@ -1,17 +1,17 @@
-.form-container {
+.adf-form-container {
    padding: 10px;
 }
-.main-content {
+.adf-main-content {
    padding: 0 15px;
 }
-.card-view {
+.adf-card-view {
    width: 30%;
    display: inline-block;
 }
-.console {
+.adf-console {
    width: 60%;
    display: inline-block;
    vertical-align: top;
@@ -35,12 +35,12 @@
    height: 500px !important;
 }
-.form-editor-buttons {
+.adf-form-editor-buttons {
    display: flex;
    justify-content: space-evenly;
 }
-.upload-config-button {
+.adf-upload-config-button {
    display: flex;
    justify-content: center;
@@ -1,4 +1,4 @@
-<div class="content header-data">
+<div class="adf-content adf-header-data">
    <h1>Header data</h1>
    <mat-card>
        <div>
@@ -1,4 +1,4 @@
-.content {
+.adf-content {
    padding: 10px;
    .mat-card {
        padding: 16px 24px;
@@ -21,7 +21,7 @@
            }
            p {
-                margin: 0 0 5px 0;
+                margin: 0 0 5px;
            }
        }
    }
@@ -26,7 +26,7 @@
        font-size: 18px;
        font-weight: 300;
        line-height: 28px;
-        margin: 15px 0 25px 0;
+        margin: 15px 0 25px;
    }
 }
@@ -1,7 +1,7 @@
 <!--BPM, ECN AND CSRF TOGGLE-->
-<div class="settings">
+<div class="adf-settings">
-    <p class="toggle">
+    <p class="adf-toggle">
        <mat-slide-toggle
            id="switch3"
            [color]="'primary'"
@@ -10,7 +10,7 @@
            CSRF
        </mat-slide-toggle>
    </p>
-    <p class="toggle">
+    <p class="adf-toggle">
        <mat-slide-toggle
            id="switch4"
            [color]="'primary'"
@@ -19,7 +19,7 @@
            {{ 'LOGIN.LOGIN_FOOTER'| translate }}
        </mat-slide-toggle>
    </p>
-    <p class="toggle">
+    <p class="adf-toggle">
        <mat-slide-toggle
            id="adf-toggle-show-rememberme"
            [color]="'primary'"
@@ -28,7 +28,7 @@
            {{ 'LOGIN.SHOW_REMEMBERME'| translate }}
        </mat-slide-toggle>
    </p>
-    <p class="toggle">
+    <p class="adf-toggle">
        <mat-slide-toggle
            id="adf-toggle-show-successRoute"
            [color]="'primary'"
@@ -37,7 +37,7 @@
            {{ 'LOGIN.SHOW_SUCCESS_ROUTE'| translate }}
        </mat-slide-toggle>
    </p>
-    <p class="toggle">
+    <p class="adf-toggle">
        <ng-container *ngIf="customSuccessRoute">
            <mat-form-field floatPlaceholder="float">
                <input matInput
@@ -48,7 +48,7 @@
        </ng-container>
    </p>
-    <p class="toggle">
+    <p class="adf-toggle">
        <mat-slide-toggle
            id="adf-toggle-logo"
            [color]="'primary'"
@@ -57,7 +57,7 @@
            {{ 'LOGIN.CUSTOM_LOGO'| translate }}
        </mat-slide-toggle>
    </p>
-    <p class="toggle">
+    <p class="adf-toggle">
        <ng-container *ngIf="customLogoImage">
            <mat-form-field floatPlaceholder="float">
                <input matInput
@@ -72,7 +72,7 @@
 <!--SETTING BUTTON-->
-<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
+<a mat-fab class="adf-setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
    <mat-icon>settings</mat-icon>
 </a>
@@ -88,7 +88,7 @@
    copyrightText="{{ 'application.copyright' | adfAppConfig }}"
    (success)="onLogin($event)"
    (error)="onError($event)">
-    <div class="mobile-settings">
+    <div class="adf-mobile-settings">
        <p>
            <mat-slide-toggle
                id="switch3-mobile"
@@ -107,7 +107,7 @@
                {{ 'LOGIN.LOGIN_FOOTER'| translate }}
            </mat-slide-toggle>
        </p>
-        <button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings"
+        <button type="button" mat-raised-button color="accent" class="adf-mobile-setting-button" routerLink="/settings"
                data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
        </button>
@@ -1,5 +1,5 @@
@mixin adf-login-component-theme($theme) {
-    .setting-button.mat-fab.mat-accent {
+    .adf-setting-button.mat-fab.mat-accent {
        position: absolute;
        right: 10px;
        top: 10px;
@@ -7,7 +7,7 @@
    }
-    .settings {
+    .adf-settings {
        border-radius: 8px;
        position: absolute;
        background-color: papayawhip;
@@ -17,36 +17,36 @@
        z-index: 1;
    }
-    .toggle {
+    .adf-toggle {
        width: auto;
        margin: 5px;
        padding: 5px;
    }
-    .mobile-settings, .mobile-setting-button {
+    .adf-mobile-settings, .adf-mobile-setting-button {
        display: none;
    }
    @media screen and ($mat-small) {
-        .settings, .setting-button.mat-fab.mat-accent  {
+        .adf-settings, .adf-setting-button.mat-fab.mat-accent {
            display: none;
        }
-        .mobile-settings, .mobile-setting-button {
+        .adf-mobile-settings, .adf-mobile-setting-button {
            display: block;
        }
-        .mobile-setting-button {
+        .adf-mobile-setting-button {
            width: 100%;
        }
-        .mobile-settings {
+        .adf-mobile-settings {
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
    }
-    .settings ::ng-deep .mat-slide-toggle-thumb-container {
+    .adf-settings ::ng-deep .mat-slide-toggle-thumb-container {
        cursor: pointer;
    }
 }
@@ -26,7 +26,7 @@
        font-size: 18px;
        font-weight: 300;
        line-height: 28px;
-        margin: 15px 0 25px 0;
+        margin: 15px 0 25px;
    }
 }
@@ -1,4 +1,4 @@
-<div class="main-content">
+<div class="adf-main-content">
    <h1>Notification Service</h1>
    <ul>
@@ -32,24 +32,24 @@
    <form [formGroup]="configForm">
        <mat-form-field>
-            <mat-select class="form-control" formControlName="direction" placeholder="Direction" data-automation-id="notification-direction">
+            <mat-select formControlName="direction" placeholder="Direction" data-automation-id="notification-direction">
                    <mat-option *ngFor="let direction of directions" [value]="direction.value">
                        {{ direction.title }}
                    </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
-            <input matInput type="number" class="form-control" formControlName="duration"  [value]="defaultDuration" placeholder="Duration" data-automation-id="notification-duration">
+            <input matInput type="number" formControlName="duration"  [value]="defaultDuration" placeholder="Duration" data-automation-id="notification-duration">
        </mat-form-field>
        <mat-form-field>
-            <mat-select class="form-control" formControlName="horizontalPosition" placeholder="Horizontal Position" data-automation-id="notification-horizontal-position">
+            <mat-select formControlName="horizontalPosition" placeholder="Horizontal Position" data-automation-id="notification-horizontal-position">
                <mat-option *ngFor="let horizontalPosition of horizontalPositions" [value]="horizontalPosition.value">
                    {{ horizontalPosition.title }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
-            <mat-select class="form-control" formControlName="verticalPosition" placeholder="Vertical Position" data-automation-id="notification-vertical-position">
+            <mat-select formControlName="verticalPosition" placeholder="Vertical Position" data-automation-id="notification-vertical-position">
                <mat-option *ngFor="let verticalPosition of verticalPositions" [value]="verticalPosition.value">{{ verticalPosition.title }}</mat-option>
            </mat-select>
        </mat-form-field>
@@ -1,3 +1,3 @@
-.main-content {
+.adf-main-content {
    padding: 10px;
 }
@@ -1,4 +1,4 @@
-<div class="inherit_permission_button">
+<div class="adf-inherit_permission_button">
    <button mat-raised-button
            [color]="toggleStatus?'accent':'primary'"
            adf-inherit-permission [nodeId]="nodeId"
@@ -1,4 +1,4 @@
-.inherit_permission_button {
+.adf-inherit_permission_button {
    padding-top: 20px;
    display: flex;
    justify-content: center;
@@ -1,11 +1,10 @@
-<div class="process-list-inputs">
+<div class="adf-process-list-inputs">
    <form [formGroup]="processListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="processAppId">
            <mat-error *ngIf="processAppId.hasError('required')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
@@ -31,7 +30,6 @@
            <mat-label>ProcessDefinitionId</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="processDefinitionId">
            <mat-hint>SimpleProcess:1:2</mat-hint>
        </mat-form-field>
@@ -39,7 +37,6 @@
        <mat-form-field>
            <mat-label>State</mat-label>
            <mat-select
                class="form-control"
                [formControl]="processState">
                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
            </mat-select>
@@ -48,7 +45,6 @@
        <mat-form-field>
            <mat-label>Sort</mat-label>
            <mat-select
                class="form-control"
                [formControl]="processSort">
                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
            </mat-select>
@@ -59,7 +55,6 @@
            <mat-label>Items per page</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="processSize">
            <mat-error *ngIf="processSize.hasError('min')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
@@ -73,7 +68,6 @@
            <mat-label>Page</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="processPage">
            <mat-error *ngIf="processPage.hasError('min')">
                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
@@ -1,10 +1,10 @@
-.process-list-inputs {
+.adf-process-list-inputs {
    margin: 20px auto 0;
    max-width: 1200px;
    & mat-form-field {
        margin: 20px 5px;
-        width: calc(100% * (1/4) - 10px);
+        width: calc(100% * (1 / 4) - 10px);
    }
 }
@@ -14,7 +14,7 @@
    justify-content: center;
 }
-.process-list-error-message {
+.adf-process-list-error-message {
    color: red;
    text-align: center;
 }
@@ -1,7 +1,7 @@
 <mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
               data-automation-id="navigation-bar">
-    <mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+    <mat-tab id="adf-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
-        <div class="page-content" *ngIf="showTaskTab">
+        <div class="adf-page-content" *ngIf="showTaskTab">
            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="265px">
                    <div class="adf-list-buttons">
@@ -57,8 +57,8 @@
                        <!-- Custom column definition demo -->
                        <!-- <data-columns>
-                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="full-width name-column"></data-column>
+                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="adf-full-width name-column"></data-column>
-                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="hidden"></data-column>
+                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="adf-hidden"></data-column>
                        </data-columns> -->
                    </adf-tasklist>
@@ -113,7 +113,7 @@
    </mat-tab>
    <mat-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
-        <div class="page-content" *ngIf="showProcessTab">
+        <div class="adf-page-content" *ngIf="showProcessTab">
            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
                <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
                    <div class="adf-list-buttons">
@@ -150,7 +150,7 @@
                    </mat-accordion>
                </div>
                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
-                     [ngClass.gt-md]="{'small-pagination': true}"
+                     [ngClass.gt-md]="{'adf-small-pagination': true}"
                     *ngIf="processFilter && !isStartProcessMode()">
                    <adf-process-instance-list
                        #processList
@@ -169,8 +169,8 @@
                        <!-- Custom column definition demo -->
                        <!-- <data-columns>
-                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="adf-full-width name-column"></data-column>
-                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
+                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="adf-hidden"></data-column>
                        </data-columns> -->
                    </adf-process-instance-list>
@@ -1,4 +1,4 @@
-@mixin adf-process-service-component-theme($theme){
+@mixin adf-process-service-component-theme($theme) {
    .adf-no-form-container {
        text-align: center;
        font-weight: 600;
@@ -9,7 +9,9 @@
        .adf-grid-item {
            margin: 4px;
-            box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
            0 3px 1px -2px rgba(0, 0, 0, 0.2),
            0 1px 5px 0 rgba(0, 0, 0, 0.12);
            padding: 10px;
        }
@@ -21,8 +23,8 @@
            width: 100%;
        }
-        .adf-tasks-list.small-pagination,
+        .adf-tasks-list.adf-small-pagination,
-        .adf-processes-list.small-pagination {
+        .adf-processes-list.adf-small-pagination {
            .adf-pagination {
                flex-wrap: wrap;
@@ -99,7 +101,7 @@
        }
        @media screen and ($mat-small) {
-            container-widget .grid-list {
+            container-widget .adf-grid-list {
                flex-direction: column;
            }
        }
@@ -121,7 +123,7 @@
            align-items: center;
        }
-        .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{
+        .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title {
            color: mat-color($primary);
            opacity: 1;
        }
@@ -4,7 +4,7 @@
            {{'APP_LAYOUT.SEARCH_SERVICE_APPROACH' | translate}}
    </mat-checkbox>
-    <div id="container-for-custom-input" class="search-extended-input-containers">
+    <div id="container-for-custom-input" class="adf-search-extended-input-containers">
        <mat-form-field>
            <label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
            <input type="text" matInput
@@ -14,12 +14,12 @@
    <div>
      <adf-search #auto="searchAutocomplete"
                  [queryBody]="generateQueryBody(searchedWord)"
-                  class="example-card-search-container">
+                  class="adf-example-card-search-container">
          <ng-template let-data>
-            <mat-card class="example-card"
+            <mat-card class="adf-example-card"
                 *ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
                <mat-card-header>
-                    <div mat-card-avatar class="example-header-image"></div>
+                    <div mat-card-avatar class="adf-example-header-image"></div>
                    <mat-card-title>{{ item?.entry.name }}</mat-card-title>
                    <mat-card-subtitle>{{ item?.entry.createdAt }}</mat-card-subtitle>
                </mat-card-header>
@@ -30,7 +30,7 @@
                    </p>
                </mat-card-content>
            </mat-card>
-            <mat-card class="example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
+            <mat-card class="adf-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
            </mat-card>
        </ng-template>
@@ -1,50 +1,50 @@
-div.search-results-container {
+div.adf-search-results-container {
-    padding: 0 20px 20px 20px;
+    padding: 0 20px 20px;
 }
 .adf-search-title {
    font-size: 22px;
-    padding: 15px 0 15px 0;
+    padding: 15px 0;
 }
@media screen and (max-width: 600px) {
-    :host .col-display-name {
+    :host .adf-col-display-name {
        min-width: 100px;
    }
-    :host .col-modified-at, :host .col-modified-by {
+    :host .adf-col-modified-at, :host .adf-col-modified-by {
        display: none;
    }
-    :host div.search-results-container table {
+    :host div.adf-search-results-container table {
        width: 100%;
    }
 }
-.adf-search-results-content{
+.adf-search-results-content {
    display: flex;
 }
-.search-extended-input-containers {
+.adf-search-extended-input-containers {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
 }
-.search-extended-input-textarea {
+.adf-search-extended-input-textarea {
    width: 300px;
 }
-.search-extended-label-error {
+.adf-search-extended-label-error {
    display: flex;
    flex-direction: column;
 }
-.example-card {
+.adf-example-card {
    width: 200px;
    flex: 0 20%;
    margin: 15px;
  }
-  .example-card-search-container {
+  .adf-example-card-search-container {
    display: flex;
    flex-wrap: wrap;
  }
@@ -20,23 +20,23 @@
    }
 }
-div.search-results-container {
+div.adf-search-results-container {
-    padding: 0 20px 20px 20px;
+    padding: 0 20px 20px;
 }
 .adf-search-title {
    font-size: 22px;
-    padding: 15px 0 15px 0;
+    padding: 15px 0;
 }
@media screen and (max-width: 600px) {
-    :host .col-display-name {
+    :host .adf-col-display-name {
        min-width: 100px;
    }
-    :host .col-modified-at, :host .col-modified-by {
+    :host .adf-col-modified-at, :host .adf-col-modified-by {
        display: none;
    }
-    :host div.search-results-container table {
+    :host div.adf-search-results-container table {
        width: 100%;
    }
 }
@@ -1,4 +1,4 @@
-.app-shared-link-view {
+.adf-shared-link-view {
    width: 100%;
    height: 100%;
 }
@@ -24,7 +24,7 @@ import { ActivatedRoute, Router } from '@angular/router';
    styleUrls: [ 'shared-link-view.component.scss' ],
    encapsulation: ViewEncapsulation.None,
    // tslint:disable-next-line:use-host-property-decorator
-    host: { 'class': 'app-shared-link-view' }
+    host: { 'class': 'adf-shared-link-view' }
 })
 export class SharedLinkViewComponent implements OnInit {
@@ -15,7 +15,7 @@
                Customise your filter
            </mat-panel-description>
        </mat-expansion-panel-header>
-        <div class="task-cloud-demo-select">
+        <div class="adf-task-cloud-demo-select">
            <mat-form-field style="margin: 8px;">
                <mat-select placeholder="Status" [(ngModel)]="status">
                    <mat-option value="">
@@ -1,15 +1,15 @@
-.task-cloud-demo-select {
+.adf-task-cloud-demo-select {
    padding: 10px;
 }
-.task-cloud-demo-select .mat-expansion-panel-body {
+.adf-task-cloud-demo-select .mat-expansion-panel-body {
    display: flex;
 }
-.app-task-list-cloud-demo-selection{
+.adf-app-task-list-cloud-demo-selection {
    display: flex;
 }
-.task-row-clicked {
+.adf-task-row-clicked {
    align-self: center;
 }
@@ -1,11 +1,10 @@
-<div class="task-list-demo-inputs">
+<div class="adf-task-list-demo-inputs">
    <form [formGroup]="taskListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="taskAppId" data-automation-id="appId input">
            <mat-error *ngIf="taskAppId.hasError('pattern')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
@@ -16,7 +15,6 @@
            <mat-label>Task Name</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="taskName" data-automation-id="task name">
        </mat-form-field>
@@ -24,7 +22,6 @@
            <mat-label>Task Id</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="taskId" data-automation-id="task id">
        </mat-form-field>
@@ -32,7 +29,7 @@
            <mat-label>Start</mat-label>
            <input
                matInput
-                class="form-control" data-automation-id="start"
+                data-automation-id="start"
                matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
                [formControl]="taskStart">
            <mat-error *ngIf="taskStart.hasError('pattern')">
@@ -104,7 +101,6 @@
        <mat-form-field>
            <mat-label>Process Instance</mat-label>
            <mat-select
                class="form-control"
                [formControl]="taskIncludeProcessInstance">
                <mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions"
                            [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}
@@ -115,7 +111,6 @@
        <mat-form-field>
            <mat-label>Assignment</mat-label>
            <mat-select
                class="form-control"
                [formControl]="taskAssignment">
                <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{
                    assignmentOption.title }}
@@ -126,7 +121,6 @@
        <mat-form-field data-automation-id="state">
            <mat-label>State</mat-label>
            <mat-select
                class="form-control"
                [formControl]="taskState" data-automation-id="selected state">
                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{
                    stateOption.title }}
@@ -137,7 +131,6 @@
        <mat-form-field data-automation-id="sort">
            <mat-label>Sort</mat-label>
            <mat-select
                class="form-control"
                [formControl]="taskSort" data-automation-id="selected sort">
                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title
                    }}
@@ -169,7 +162,7 @@
        #taskList>
        <data-columns>
            <data-column key="id" title="Id"></data-column>
-            <data-column key="assignee" title="Assignee" class="full-width name-column">
+            <data-column key="assignee" title="Assignee" class="adf-full-width adf-name-column">
                <ng-template let-entry="$implicit">
                    <div>{{entry.row.obj.assignee | fullName}}</div>
                </ng-template>
@@ -1,10 +1,10 @@
-.task-list-demo-inputs {
+.adf-task-list-demo-inputs {
    margin: 20px auto 0;
    max-width: 1200px;
    & mat-form-field {
        margin: 20px 5px;
-        width: calc(100% * (1/4) - 10px);
+        width: calc(100% * (1 / 4) - 10px);
    }
 }
@@ -14,7 +14,7 @@
    justify-content: center;
 }
-.task-list-demo-error-message {
+.adf-task-list-demo-error-message {
    color: red;
    text-align: center;
 }
@@ -55,7 +55,7 @@
                    key="$thumbnail"
                    type="image"
                    [sortable]="false"
-                    class="image-table-cell">
+                    class="adf-image-table-cell">
                </data-column>
                <data-column
@@ -15,7 +15,7 @@
          height: 100%;
      }
-      .loader-container {
+      .adf-loader-container {
          display: flex;
          flex-direction: column;
          height:100%;
@@ -24,23 +24,23 @@
          justify-content: center;
      }
-      .loader-item {
+      .adf-loader-item {
          max-height:100px;
          max-width:300px;
      }
-      .loader-spinner {
+      .adf-loader-spinner {
          max-height:300px;
          max-width:300px;
      }
-      .loader-text{
+      .adf-loader-text {
          white-space: nowrap;
          text-align: center;
          position: relative;
      }
-      .loader {
+      .adf-loader {
          position: absolute;
          width: 100px;
          height: 100px;
@@ -49,17 +49,17 @@
          transform: translate(-50%, -50%);
      }
-      .circular {
+      .adf-circular {
          animation: rotate 2s linear infinite;
          height: 100px;
          position: relative;
          width: 100px;
      }
-      .path {
+      .adf-path {
-          stroke-dasharray: 1,200;
+          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
-          stroke: #B6463A;
+          stroke: #b6463a;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          stroke-linecap: round;
      }
@@ -71,15 +71,15 @@
      }
      @keyframes dash {
          0% {
-              stroke-dasharray: 1,200;
+              stroke-dasharray: 1, 200;
              stroke-dashoffset: 0;
          }
          50% {
-              stroke-dasharray: 89,200;
+              stroke-dasharray: 89, 200;
              stroke-dashoffset: -35;
          }
          100% {
-              stroke-dasharray: 89,200;
+              stroke-dasharray: 89, 200;
              stroke-dashoffset: -124;
          }
      }
@@ -101,14 +101,14 @@
 </head>
 <body class="adf-background-color">
 <app-root>
-  <div id="loader-container" class="loader-container">
+  <div id="loader-container" class="adf-loader-container">
-      <div class="loader-spinner">
+      <div class="adf-loader-spinner">
-          <svg class="circular">
+          <svg class="adf-circular">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
          </svg>
      </div>
-    <div class="loader-item">
+    <div class="adf-loader-item">
-      <div id="loader-text" class="loader-text">Loading Demo Shell..</div>
+      <div id="loader-text" class="adf-loader-text">Loading Demo Shell..</div>
    </div>
  </div>
 </app-root>
@@ -220,7 +220,7 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
            key="$thumbnail"
            type="image"
            [sortable]="false"
-            class="image-table-cell">
+            class="adf-image-table-cell">
        </data-column>
        ...
@@ -231,7 +231,7 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
 Now your application can define styles to change the content of the column based on conditions such as the selection state:
 ```css
-adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg {
+adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.adf-image-table-cell > div > div > mat-icon > svg {
    fill: #00bcd4;
 }
 ```
@@ -62,7 +62,7 @@ In the component template use the [people list component](../process-services/pe
    </data-column>
    <data-column key="email" class="full-width">
      <ng-template let-entry="$implicit">
-        <div class="people-email">{{ entry.row.obj.email }}</div>
+        <div class="adf-people-email">{{ entry.row.obj.email }}</div>
      </ng-template>
    </data-column>
  </data-columns>
@@ -196,9 +196,9 @@ The component is a wrapper of the data-table component with a custom action i.e
            </data-column>
            <data-column key="email" class="full-width">
              <ng-template let-entry="$implicit">
-                <div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
+                <div class="adf-people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
-                <div class="people-email">{{ entry.row.obj.email }}</div>
+                <div class="adf-people-email">{{ entry.row.obj.email }}</div>
-                <div class="people-edit-label">can edit</div>
+                <div class="adf-people-edit-label">can edit</div>
              </ng-template>
            </data-column>
          </data-columns>
@@ -20,6 +20,7 @@ import fs = require('fs');
 import TestConfig = require('../../test.config');
 import AppPublish = require('../../models/APS/AppPublish');
 import remote = require('selenium-webdriver/remote');
 import { browser } from 'protractor';
 export class AppsActions {
@@ -19,7 +19,7 @@ var Util = require('../../util/util');
 var CardViewComponentPage = function () {
-    const addButton = element(by.className('card-view__key-value-pairs__add-btn'));
+    const addButton = element(by.className('adf-card-view__key-value-pairs__add-btn'));
    const keyValueRow = 'card-view__key-value-pairs__row';
    const selectValue = 'mat-option';
    const textField = element(by.css("input[data-automation-id='card-textitem-editinput-name']"));
@@ -27,8 +27,8 @@ var CardViewComponentPage = function () {
    const floatField = element(by.css("input[data-automation-id='card-textitem-editinput-float']"));
    const valueInputField = element(by.xpath("//*[contains(@id,'input') and @placeholder='Value']"));
    const nameInputField = element(by.xpath("//*[contains(@id,'input') and @placeholder='Name']"));
-    const consoleLog = element(by.className('console'));
+    const consoleLog = element(by.className('adf-console'));
-    const deleteButton = element.all(by.className('card-view__key-value-pairs__remove-btn')).first();
+    const deleteButton = element.all(by.className('adf-card-view__key-value-pairs__remove-btn')).first();
    const select = element(by.css('mat-select[data-automation-class="select-box"]'));
    const checkbox = element(by.css("mat-checkbox[data-automation-id='card-boolean-boolean']"));
    const resetButton = element(by.css("#adf-reset-card-log"));
@@ -31,10 +31,10 @@ export class ContentServicesPage {
    uploadBorder = element(by.id('document-list-container'));
    tableBody = element.all(by.css('adf-document-list div[class="adf-datatable-body"]')).first();
    contentServices = element(by.css('a[data-automation-id="Content Services"]'));
-    currentFolder = element(by.css('div[class*="adf-breadcrumb-item active"] div'));
+    currentFolder = element(by.css('div[class*="adf-breadcrumb-item adf-active"] div'));
    createFolderButton = element(by.cssContainingText('mat-icon', 'create_new_folder'));
-    activeBreadcrumb = element(by.css('div[class*="active"]'));
+    activeBreadcrumb = element(by.css('div[class*="adf-active"]'));
-    tooltip = by.css('div[class*="--text full-width"] span');
+    tooltip = by.css('div[class*="--text adf-full-width"] span');
    uploadFileButton = element(by.css('input[data-automation-id="upload-single-file"]'));
    uploadMultipleFileButton = element(by.css('input[data-automation-id="upload-multiple-files"]'));
    uploadFolderButton = element(by.css('input[data-automation-id="uploadFolder"]'));
@@ -53,9 +53,9 @@ export class ContentServicesPage {
    documentListSpinner = element(by.css('mat-progress-spinner'));
    emptyFolder = element(by.css('.adf-empty-folder-this-space-is-empty'));
    emptyFolderImage = element(by.css('.adf-empty-folder-image'));
-    emptyRecent = element(by.css('.adf-container-recent .empty-list__title'));
+    emptyRecent = element(by.css('.adf-container-recent .adf-empty-list__title'));
    gridViewButton = element(by.css('button[data-automation-id="document-list-grid-view"]'));
-    cardViewContainer = element(by.css('div.document-list-container div.adf-data-table-card'));
+    cardViewContainer = element(by.css('div.adf-document-list-container div.adf-data-table-card'));
    copyButton = element(by.css('button[data-automation-id="content-node-selector-actions-choose"]'));
    searchInputElement = element(by.css('input[data-automation-id="content-node-selector-search-input"'));
    shareNodeButton = element(by.cssContainingText('mat-icon', ' share '));
@@ -457,7 +457,7 @@ export class ContentServicesPage {
    }
    checkIconForRowIsDisplayed(fileName) {
-        let iconRow = element(by.css(`.document-list-container div.adf-data-table-cell[filename="${fileName}"] img`));
+        let iconRow = element(by.css(`.adf-document-list-container div.adf-data-table-cell[filename="${fileName}"] img`));
        Util.waitUntilElementIsVisible(iconRow);
        return iconRow;
    }
@@ -482,22 +482,22 @@ export class ContentServicesPage {
    getCardElementShowedInPage() {
        this.checkCardViewContainerIsDisplayed();
-        let actualCards = $$('div.document-list-container div.adf-data-table-card div.cell-value img').count();
+        let actualCards = $$('div.adf-document-list-container div.adf-data-table-card div.adf-cell-value img').count();
        return actualCards;
    }
    getDocumentCardIconForElement(elementName) {
-        let elementIcon = element(by.css(`.document-list-container div.adf-data-table-cell[filename="${elementName}"] img`));
+        let elementIcon = element(by.css(`.adf-document-list-container div.adf-data-table-cell[filename="${elementName}"] img`));
        return elementIcon.getAttribute('src');
    }
    checkDocumentCardPropertyIsShowed(elementName, propertyName) {
-        let elementProperty = element(by.css(`.document-list-container div.adf-data-table-cell[filename="${elementName}"][title="${propertyName}"]`));
+        let elementProperty = element(by.css(`.adf-document-list-container div.adf-data-table-cell[filename="${elementName}"][title="${propertyName}"]`));
        Util.waitUntilElementIsVisible(elementProperty);
    }
    getAttributeValueForElement(elementName, propertyName) {
-        let elementSize = element(by.css(`.document-list-container div.adf-data-table-cell[filename="${elementName}"][title="${propertyName}"] span`));
+        let elementSize = element(by.css(`.adf-document-list-container div.adf-data-table-cell[filename="${elementName}"][title="${propertyName}"] span`));
        return elementSize.getText();
    }
@@ -507,9 +507,9 @@ export class ContentServicesPage {
    }
    navigateToCardFolder(folderName) {
-        let folderCard = element(by.css(`.document-list-container div.image-table-cell.adf-data-table-cell[filename="${folderName}"]`));
+        let folderCard = element(by.css(`.adf-document-list-container div.adf-image-table-cell.adf-data-table-cell[filename="${folderName}"]`));
        folderCard.click();
-        let folderSelected = element(by.css(`.adf-datatable-row.is-selected div[filename="${folderName}"].adf-data-table-cell--image`));
+        let folderSelected = element(by.css(`.adf-datatable-row.adf-is-selected div[filename="${folderName}"].adf-data-table-cell--image`));
        Util.waitUntilElementIsVisible(folderSelected);
        browser.actions().sendKeys(protractor.Key.ENTER).perform();
    }
@@ -122,9 +122,7 @@ var SearchDialog = function () {
    this.clearText = function () {
        Util.waitUntilElementIsVisible(searchBar);
        var deferred = protractor.promise.defer();
-        searchBar.clear().then(function () {
+        searchBar.clear();
            searchBar.sendKeys(protractor.Key.ESCAPE);
        });
        return deferred.promise;
    };
 };
@@ -17,7 +17,6 @@
 import { element, by } from 'protractor';
 import Util = require('../../../util/util');
 import moment = require('moment');
 import { FormControllersPage } from '../material/formControllersPage';
 export class ShareDialog {
@@ -32,7 +31,7 @@ export class ShareDialog {
    shareLink = element(by.css('[data-automation-id="adf-share-link"]'));
    closeButton = element(by.css('button[data-automation-id="adf-share-dialog-close"]'));
    snackBar = element(by.css('simple-snack-bar'));
-    copySharedLinkButton = element(by.css('.input-action'));
+    copySharedLinkButton = element(by.css('.adf-input-action'));
    timeDatePickerButton = element(by.css('mat-datetimepicker-toggle button'));
    dayPicker = element(by.css('mat-datetimepicker-month-view'));
    clockPicker = element(by.css('mat-datetimepicker-clock'));
@@ -17,6 +17,7 @@
 import Util = require('../../../util/util');
 import { TabsPage } from '../material/tabsPage';
 import { element, by, browser, protractor } from 'protractor';
 export class UserInfoDialog {
@@ -62,6 +63,7 @@ export class UserInfoDialog {
    }
    getContentHeaderTitle() {
        Util.waitUntilElementIsVisible(this.dialog);
        Util.waitUntilElementIsVisible(this.userInfoEcmHeaderTitle);
        return this.userInfoEcmHeaderTitle.getText();
    }
@@ -21,7 +21,7 @@ var Util = require('../../util/util');
 var contentServices = element(by.css("a[data-automation-id='files'] span"));
 var siteList = element(by.css("md-select[class*='dropdown-list']"));
 var folderID = element(by.css('adf-files-component p'));
-var folderText = element(by.css("md-input-container[class*='create-folder--name'] input"));
+var folderText = element(by.css("md-input-container[class*='adf-create-folder--name'] input"));
 var createButtonDialog = element(by.xpath("//span[contains(text(), 'Create')]/ancestor::button"));
 var createFolderButton = element(by.xpath("//md-icon[contains(text(), 'create_new_folder')]"));
 var currentFolder = element(by.xpath("//div[@class='adf-breadcrumb-container']/li[last()]/div"));
@@ -32,7 +32,7 @@ export class LoginPage {
    logoTxt = element(by.css('input[data-automation-id="adf-url-logo"]'));
    usernameTooltip = element(by.css('span[data-automation-id="username-error"]'));
    passwordTooltip = element(by.css('span[data-automation-id="password-required"]'));
-    loginTooltip = element(by.css('span[class="login-error-message"]'));
+    loginTooltip = element(by.css('span[class="adf-login-error-message"]'));
    usernameInactive = element(by.css('input[id="username"][aria-invalid="false"]'));
    passwordInactive = element(by.css('input[id="password"][aria-invalid="false"]'));
    adfLogo = element(by.css('img[class="adf-img-logo ng-star-inserted"]'));
@@ -35,7 +35,7 @@ export class NavigationBarPage {
    themeButton = element(by.css('button[data-automation-id="theme menu"]'));
    themeMenuContent = element(by.css('div[class*="mat-menu-panel"]'));
    logoutButton = element(by.css('a[adf-logout]'));
-    cardViewButton = element(by.cssContainingText('.sidenav-menu-label', 'CardView'));
+    cardViewButton = element(by.cssContainingText('.adf-sidenav-menu-label', 'CardView'));
    languageMenuButton = element(by.css('button[data-automation-id="language-menu-button"]'));
    appTitle = element(by.css('.adf-app-title'));
    headerDataButton = element(by.css('a[data-automation-id="Header Data"]'));
@@ -66,12 +66,14 @@ export class NotificationPage {
    enterMessageField(text) {
        Util.waitUntilElementIsVisible(this.messageField);
-        this.messageField.clear().sendKeys(text);
+        this.messageField.clear();
        this.messageField.sendKeys(text);
    }
    enterDurationField(time) {
        Util.waitUntilElementIsVisible(this.durationField);
-        this.durationField.clear().sendKeys(time);
+        this.durationField.clear();
        this.durationField.sendKeys(time);
    }
    selectHorizontalPosition(selectedItem) {
@@ -45,7 +45,7 @@ var ProcessDetailsPage = function () {
    //Tasks
    var activeTask = element(by.css('div[data-automation-id="active-tasks"]'));
    var completedTask = element(by.css('div[data-automation-id="completed-tasks"]'));
-    var taskTitle = element(by.css("h2[class='activiti-task-details__header']"));
+    var taskTitle = element(by.css("h2[class='adf-activiti-task-details__header']"));
    this.checkDetailsAreDisplayed = function () {
        Util.waitUntilElementIsVisible(processStatusField);
@@ -87,7 +87,7 @@ var ProcessFiltersPage = function () {
    };
    this.checkFilterIsHighlighted = function (filterName) {
-        var processNameHighlighted = element(by.css("mat-list-item.active span[data-automation-id='" + filterName + "_filter']"));
+        var processNameHighlighted = element(by.css("mat-list-item.adf-active span[data-automation-id='" + filterName + "_filter']"));
        Util.waitUntilElementIsVisible(processNameHighlighted);
    };
@@ -42,19 +42,19 @@ export class TaskDetailsPage {
    involvePeopleButton = element(by.css('div[class*="add-people"]'));
    addPeopleField = element(by.css('input[data-automation-id="adf-people-search-input"]'));
    addInvolvedUserButton = element(by.css('button[id="add-people"] span'));
-    emailInvolvedUser = by.xpath('following-sibling::div[@class="people-email ng-star-inserted"]');
+    emailInvolvedUser = by.xpath('following-sibling::div[@class="adf-people-email ng-star-inserted"]');
-    editActionInvolvedUser = by.xpath('following-sibling::div[@class="people-edit-label ng-star-inserted"]');
+    editActionInvolvedUser = by.xpath('following-sibling::div[@class="adf-people-edit-label ng-star-inserted"]');
    involvedUserPic = by.xpath('ancestor::div/ancestor::div/preceding-sibling::div//div[@class="adf-people-search-people-pic ng-star-inserted"]');
    taskDetailsInfoDrawer = element(by.tagName('adf-info-drawer'));
    taskDetailsSection = element(by.css('div[data-automation-id="adf-tasks-details"]'));
    taskDetailsEmptySection = element(by.css('div[data-automation-id="adf-tasks-details--empty"]'));
    completeTask = element(by.css('button[id="adf-no-form-complete-button"]'));
    completeFormTask = element(by.css('button[id="adf-form-complete"]'));
-    taskDetailsTitle = element(by.css('h2[class="activiti-task-details__header"] span'));
+    taskDetailsTitle = element(by.css('h2[class="adf-activiti-task-details__header"] span'));
    auditLogButton = element(by.css('button[adf-task-audit]'));
    noPeopleInvolved = element(by.id('no-people-label'));
    cancelInvolvePeopleButton = element(by.id('close-people-search'));
-    involvePeopleHeader = element(by.css('div[class="search-text-header"]'));
+    involvePeopleHeader = element(by.css('div[class="adf-search-text-header"]'));
    removeInvolvedPeople = element(by.css('button[data-automation-id="Remove"]'));
    peopleTitle = element(by.id('people-title'));
    editFormButton = element.all(by.css('mat-icon[data-automation-id="card-textitem-edit-icon-create"]')).last();
@@ -32,7 +32,7 @@ export class TasksPage {
    addChecklistButton = element(by.css('button[class*="adf-add-to-checklist-button"]'));
    rowByRowName = by.xpath('ancestor::mat-chip');
    checklistContainer = by.css('div[class*="checklist-menu"]');
-    taskTitle = 'h2[class="activiti-task-details__header"] span';
+    taskTitle = 'h2[class="adf-activiti-task-details__header"] span';
    rows = by.css('div[class*="adf-datatable-body"] div[class*="adf-datatable-row"] div[class*="adf-data-table-cell"]');
    completeButtonNoForm = element(by.id('adf-no-form-complete-button'));
    checklistDialog = element(by.id('checklist-dialog'));
@@ -16,7 +16,7 @@
 */
 import FormFields = require('../formFields');
-import { element, by } from 'protractor';
+import { element, by, protractor } from 'protractor';
 import Util = require('../../../../util/util');
 export class DateWidget {
@@ -38,6 +38,7 @@ export class DateWidget {
    }
    setDateInput(fieldId, value) {
        this.removeFromDatetimeWidget(fieldId);
        return this.formFields.setValueInInputById(fieldId, value);
    }
@@ -58,4 +59,15 @@ export class DateWidget {
        Util.waitUntilElementIsVisible(errorMessage);
        return errorMessage.getText();
    }
    removeFromDatetimeWidget(fieldId) {
        Util.waitUntilElementIsVisible(this.formFields.getWidget(fieldId));
        let dateWidgetInput = element(by.id(fieldId));
        dateWidgetInput.getAttribute('value').then((result) => {
            for (let i = result.length; i >= 0; i--) {
                dateWidgetInput.sendKeys(protractor.Key.BACK_SPACE);
            }
        });
    }
 }
@@ -21,12 +21,12 @@ import { by, element } from 'protractor';
 export class RadioButtonsWidget {
-    selectedOption = by.css('mat-radio-button[ng-reflect-checked="false"]');
+    selectedOption = by.css('mat-radio-button[ng-pristine]');
    formFields = new FormFields();
    getSpecificOptionLabel(fieldId, optionNumber) {
-        let optionLocator = by.css('label[for*="radiobuttons-option_' + optionNumber + '"] div[class*="content"]');
+        let optionLocator = by.css('label[for*="radiobuttons-option_' + optionNumber + '"] div[class*="adf-content"]');
        let option = this.formFields.getWidget(fieldId).element(optionLocator);
        Util.waitUntilElementIsVisible(option);
@@ -34,7 +34,7 @@ export class RadioButtonsWidget {
    }
    selectOption(fieldId, optionNumber) {
-        let optionLocator = by.css(`label[for*="${fieldId}-option_${optionNumber}"] div[class*="content"]`);
+        let optionLocator = by.css(`label[for*="${fieldId}-option_${optionNumber}"] div[class*="adf-content"]`);
        let option = this.formFields.getWidget(fieldId).element(optionLocator);
        Util.waitUntilElementIsVisible(option);
@@ -156,7 +156,7 @@ export class ViewerPage {
    }
    checkCurrentThumbnailIsSelected() {
-        let selectedThumbnail = element(by.css('adf-pdf-thumb[class="pdf-thumbnails__thumb ng-star-inserted pdf-thumbnails__thumb--selected"] > img'));
+        let selectedThumbnail = element(by.css('adf-pdf-thumb[class="adf-pdf-thumbnails__thumb ng-star-inserted adf-pdf-thumbnails__thumb--selected"] > img'));
        this.pageSelectorInput.getAttribute('value').then(function (pageNumber) {
            browser.controlFlow().execute(async () => {
                expect('Page ' + pageNumber).toEqual(await selectedThumbnail.getAttribute('title'));
@@ -22,7 +22,6 @@ import { TasksPage } from '../pages/adf/process_services/tasksPage';
 import CONSTANTS = require('../util/constants');
 import Tenant = require('../models/APS/Tenant');
 import Task = require('../models/APS/Task');
 import TestConfig = require('../test.config');
 import resources = require('../util/resources');
@@ -41,7 +41,6 @@ describe('Modify applications', () => {
    let apps = new AppsActions();
    let modelActions = new ModelsActions();
    let firstApp, appVersionToBeDeleted;
    let model;
    beforeAll(async (done) => {
        let users = new UsersActions();
@@ -23,18 +23,13 @@ import { AttachmentListPage } from '../pages/adf/process_services/attachmentList
 import { AppNavigationBarPage } from '../pages/adf/process_services/appNavigationBarPage';
 import { NavigationBarPage } from '../pages/adf/navigationBarPage';
 import Task = require('../models/APS/Task');
 import Tenant = require('../models/APS/Tenant');
 import TaskModel = require('../models/APS/TaskModel');
 import FileModel = require('../models/ACS/fileModel');
 import FormModel = require('../models/APS/FormModel');
 import TestConfig = require('../test.config');
 import resources = require('../util/resources');
 import dateFormat = require('dateformat');
 import AlfrescoApi = require('alfresco-js-api-node');
 import { AppsActions } from '../actions/APS/apps.actions';
 import { UsersActions } from '../actions/users.actions';
@@ -43,8 +38,6 @@ import CONSTANTS = require('../util/constants');
 describe('Start Task - Custom App', () => {
    let TASK_DATA_FORMAT = 'mmm dd yyyy';
    let loginPage = new LoginPage();
    let navigationBarPage = new NavigationBarPage();
    let attachmentListPage = new AttachmentListPage();
@@ -26,16 +26,11 @@ import { NavigationBarPage } from '../pages/adf/navigationBarPage';
 import CONSTANTS = require('../util/constants');
 import Tenant = require('../models/APS/Tenant');
 import Task = require('../models/APS/Task');
 import TaskModel = require('../models/APS/TaskModel');
 import FormModel = require('../models/APS/FormModel');
 import FileModel = require('../models/ACS/fileModel');
 import TestConfig = require('../test.config');
 import resources = require('../util/resources');
 import dateFormat = require('dateformat');
 import AlfrescoApi = require('alfresco-js-api-node');
 import { UsersActions } from '../actions/users.actions';
 import fs = require('fs');
@@ -32,6 +32,7 @@ import dateFormat = require('dateformat');
 import { LoginPage } from '../pages/adf/loginPage';
 import { NavigationBarPage } from '../pages/adf/navigationBarPage';
 import { TasksPage } from '../pages/adf/process_services/tasksPage';
 import { browser } from 'protractor';
 describe('Task Details component', () => {
@@ -268,6 +269,7 @@ describe('Task Details component', () => {
        });
        let checklistTask = new TaskModel(allTasks.data[0]);
        let taskModel = new TaskModel(allTasks.data[0]);
        taskPage.tasksListPage().getDataTable().checkContentIsDisplayed(checklistTask.getName());
        expect(taskPage.taskDetails().getCreated()).toEqual(dateFormat(checklistTask.getCreated(), TASK_DATA_FORMAT));
        expect(taskPage.taskDetails().getId()).toEqual(checklistTask.getId());
@@ -311,6 +313,7 @@ describe('Task Details component', () => {
        });
        let checklistTask = new TaskModel(allTasks.data[0]);
        let taskModel = new TaskModel(allTasks.data[0]);
        taskPage.tasksListPage().getDataTable().checkContentIsDisplayed(checklistTask.getName());
        expect(taskPage.taskDetails().getCreated()).toEqual(dateFormat(checklistTask.getCreated(), TASK_DATA_FORMAT));
        expect(taskPage.taskDetails().getId()).toEqual(checklistTask.getId());
@@ -5,8 +5,8 @@
        class="adf-breadcrumb-dropdown-trigger"
        (click)="open()">
        <div class="adf-breadcrumb-dropdown-trigger-icon">
-            <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
+            <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
-            <mat-icon [class.isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
+            <mat-icon [class.adf-isRoot]="!hasPreviousNodes()" class="adf-breadcrumb-dropdown-trigger-arrow">arrow_drop_down</mat-icon>
        </div>
    </button>
@@ -26,7 +26,7 @@
    </mat-select>
    <div *ngFor="let item of lastNodes; let last = last"
-        [class.active]="last"
+        [class.adf-active]="last"
        [ngSwitch]="last"
        title="{{ item.name | translate }}"
        class="adf-breadcrumb-item"
@@ -49,7 +49,7 @@
 </nav>
 <nav *ngIf="!folderNode && hasRoot" data-automation-id="breadcrumb" role="navigation">
-    <div class="adf-breadcrumb-item active" role="listitem">
+    <div class="adf-breadcrumb-item adf-active" role="listitem">
        <div class="adf-breadcrumb-item-current">
            {{ root | translate }}
        </div>
@@ -65,16 +65,16 @@
                    z-index: 2;
                }
-                &-arrow.isRoot {
+                &-arrow.adf-isRoot {
                    visibility: hidden;
                }
-                &-arrow.focus {
+                &-arrow.adf-focus {
                    border: none;
                }
            }
-            &-trigger.isRoot {
+            &-trigger.adf-isRoot {
                cursor: not-allowed;
            }
        }
@@ -95,14 +95,16 @@
            text-overflow: ellipsis;
            &:hover,
-            &.active {
+            &.adf-active {
                opacity: 1;
            }
-            &.active {
+            &.adf-active {
                flex: 1 1 auto;
                color: mat-color($foreground, text, 0.87);
                /* stylelint-disable */
                min-width: initial;
                /* stylelint-enable */
                width: auto;
 		    }
@@ -5,7 +5,7 @@
        class="adf-dropdown-breadcrumb-trigger"
        (click)="open()"
        data-automation-id="dropdown-breadcrumb-trigger">
-        <mat-icon [class.isRoot]="!hasPreviousNodes()">folder</mat-icon>
+        <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
    </button>
    <mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
@@ -28,6 +28,6 @@
    <span
        class="adf-current-folder"
-        [class.isRoot]="!hasPreviousNodes()"
+        [class.adf-isRoot]="!hasPreviousNodes()"
        data-automation-id="current-folder">{{ currentNode.name }}</span>
 </ng-container>
@@ -25,7 +25,7 @@
            margin-top: 5px;
        }
-        &-dropdown-breadcrumb-trigger.isRoot {
+        &-dropdown-breadcrumb-trigger.adf-isRoot {
            cursor: not-allowed;
        }
@@ -51,7 +51,7 @@
            width: 75%;
        }
-        &-current-folder.isRoot {
+        &-current-folder.adf-isRoot {
            margin-left: 0;
        }
@@ -34,7 +34,7 @@
    <adf-toolbar>
        <adf-toolbar-title>
            <ng-container *ngIf="!showBreadcrumbs()">
-                <span class="search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</span>
+                <span class="adf-search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</span>
            </ng-container>
            <adf-dropdown-breadcrumb *ngIf="showBreadcrumbs()"
                class="adf-content-node-selector-content-breadcrumb"
@@ -77,7 +77,7 @@
            <data-columns>
                <data-column key="$thumbnail" type="image"></data-column>
-                <data-column key="name" type="text" class="full-width ellipsis-cell">
+                <data-column key="name" type="text" class="adf-full-width adf-ellipsis-cell">
                    <ng-template let-context>
                        <adf-name-location-cell [row]="context.row"></adf-name-location-cell>
                    </ng-template>
@@ -3,7 +3,7 @@
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
-    .search-results-label {
+    .adf-search-results-label {
        font-weight: 600;
        font-size: 14px;
        font-style: normal;
@@ -75,7 +75,7 @@
                    }
                }
-                .adf-dropddown-breadcrumb-item-chevron {
+                .adf-dropdown-breadcrumb-item-chevron {
                    color: mat-color($foreground, base, 0.45);
                }
            }
@@ -149,11 +149,11 @@
                            padding-bottom: 24px;
                            & .adf-name-location-cell-location {
-                                display: block
+                                display: block;
                            }
                            & .adf-name-location-cell-name {
-                                padding: 5px 0 2px 0;
+                                padding: 5px 0 2px;
                            }
                            &.adf-content-selector-modified-cell {
@@ -25,7 +25,7 @@
    <button mat-button
        [disabled]="!chosenNode"
-        class="choose-action"
+        class="adf-choose-action"
        (click)="onClick()"
        data-automation-id="content-node-selector-actions-choose">{{ buttonActionName | translate }}
    </button>
@@ -39,7 +39,7 @@
                font-weight: normal;
            }
-            .choose-action {
+            .adf-choose-action {
                &[disabled] {
                    opacity: 0.6;
@@ -20,7 +20,7 @@
        </div>
        <form [formGroup]="form">
-            <mat-form-field class="full-width">
+            <mat-form-field class="adf-full-width">
                <input #sharedLinkInput
                    data-automation-id="adf-share-link"
                    class="adf-share-link__input"
@@ -29,7 +29,7 @@
                    placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
                    formControlName="sharedUrl"
                    readonly="readonly">
-                    <mat-icon class="input-action" matSuffix
+                    <mat-icon class="adf-input-action" matSuffix
                          [clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate"
                          [adf-clipboard]="sharedLinkInput">
                        link
@@ -37,7 +37,7 @@
            </mat-form-field>
            <h1 class="adf-share-link__label">{{ 'SHARE.EXPIRES' | translate }}</h1>
-            <mat-form-field class="full-width">
+            <mat-form-field class="adf-full-width">
                <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
                <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="1"></mat-datetimepicker>
                <input class="adf-share-link__input"
@@ -43,11 +43,11 @@
        }
    }
-    .input-action {
+    .adf-input-action {
        cursor: pointer;
    }
-    .full-width {
+    .adf-full-width {
        width: 100%;
    }
@@ -138,7 +138,7 @@ describe('ShareDialogComponent', () => {
        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            fixture.nativeElement.querySelector('.input-action')
+            fixture.nativeElement.querySelector('.adf-input-action')
                .dispatchEvent(new MouseEvent('click'));
            fixture.detectChanges();
@@ -3,7 +3,7 @@
    <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
 </div>
 <div mat-dialog-actions>
-    <span class="spacer"></span>
+    <span class="adf-spacer"></span>
    <button mat-button color="primary" (click)="cancelDownload()">
        {{ 'CORE.DIALOG.DOWNLOAD_ZIP.ACTIONS.CANCEL' | translate }}
    </button>
@@ -1,4 +1,4 @@
-.spacer { flex: 1 1 auto; }
+.adf-spacer { flex: 1 1 auto; }
 .adf-download-zip-dialog .mat-dialog-actions .mat-button-wrapper {
    text-transform: uppercase;
@@ -7,16 +7,16 @@
 }
 .adf-lock-file-name {
-    .mat-checkbox-layout{
+    .mat-checkbox-layout {
        width: 100%;
    }
-    .mat-checkbox-label{
+    .mat-checkbox-label {
        text-overflow: ellipsis;
        overflow: hidden;
    }
-    .mat-checkbox-inner-container{
+    .mat-checkbox-inner-container {
        margin: auto 0;
        margin-right: 8px;
    }
@@ -10,7 +10,7 @@
        height: 32px;
    }
-    .document-list_empty_template {
+    .adf-document-list_empty_template {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
@@ -38,7 +38,7 @@
        }
    }
-    .document-list__this-space-is-empty {
+    .adf-document-list__this-space-is-empty {
        height: 32px;
        opacity: 0.26;
        font-size: 24px;
@@ -47,7 +47,7 @@
        color: mat-color($foreground, text);
    }
-    .document-list__drag-drop {
+    .adf-document-list__drag-drop {
        height: 56px;
        opacity: 0.54;
        font-size: 56px;
@@ -57,17 +57,17 @@
        margin-top: 40px;
    }
-    .document-list__any-files-here-to-add {
+    .adf-document-list__any-files-here-to-add {
        height: 24px;
        opacity: 0.54;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.4px;
-        color: mat-color($foreground, text)0;
+        color: mat-color($foreground, text) 0;
        margin-top: 17px;
    }
-    .document-list__empty_doc_lib {
+    .adf-document-list__empty_doc_lib {
        width: 565px;
        height: 161px;
        object-fit: contain;
@@ -161,7 +161,7 @@
                height: 100px;
            }
-            :first-child .cell-container .cell-value {
+            :first-child .adf-cell-container .adf-cell-value {
                display: flex;
                width: 265px;
                flex: 0 0 auto;
@@ -9,7 +9,7 @@
 <mat-dialog-actions>
    <button mat-button mat-dialog-close id="add-permission-dialog-close-button">{{'PERMISSION_MANAGER.ADD-PERMISSION.CLOSE-ACTION' | translate}}</button>
    <button mat-button id="add-permission-dialog-confirm-button" [mat-dialog-close]="true"
-            class="choose-action"
+            class="adf-choose-action"
            [disabled]="currentSelection?.length === 0"
            (click)="onAddClicked()">{{'PERMISSION_MANAGER.ADD-PERMISSION.ADD-ACTION' | translate}}</button>
 </mat-dialog-actions>
@@ -40,7 +40,7 @@
                font-weight: normal;
            }
-            .choose-action {
+            .adf-choose-action {
                &[disabled] {
                    opacity: 0.6;
@@ -32,7 +32,7 @@
            border: 2px solid mat-color($foreground, base, 0.07);
        }
-        &-permission-no-result{
+        &-permission-no-result {
            display: flex;
            align-items: center;
            justify-content: space-around;
@@ -1,6 +1,6 @@
@mixin adf-permission-list-theme($theme) {
-    .adf{
+    .adf {
        &-display-permission-container {
            display: flex;
@@ -4,7 +4,7 @@
        [checked]="option.checked"
        [attr.data-automation-id]="'checkbox-' + (option.name)"
        (change)="changeHandler($event, option)"
-        class="facet-filter">
+        class="adf-facet-filter">
        <div 
            matTooltip="{{ option.name | translate }}"
            matTooltipPosition="right"
@@ -15,13 +15,13 @@
    </mat-checkbox>
 </div>
-<div class="facet-buttons" *ngIf="options.fitsPage">
+<div class="adf-facet-buttons" *ngIf="options.fitsPage">
    <button mat-button color="primary" (click)="reset()">
        {{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}
    </button>
 </div>
-<div class="facet-buttons" *ngIf="!options.fitsPage">
+<div class="adf-facet-buttons" *ngIf="!options.fitsPage">
    <button mat-icon-button
        title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
        (click)="reset()">
@@ -2,7 +2,7 @@
    display: flex;
    flex-direction: column;
-    .facet-filter {
+    .adf-facet-filter {
        .mat-checkbox-label {
            text-overflow: ellipsis;
            overflow: hidden;
@@ -13,7 +13,7 @@
            width: 100%;
        }
-        .facet-name {
+        .adf-facet-name {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
@@ -45,7 +45,6 @@
            transform-origin: top left;
            transform:translateX(-40px);
            position: absolute;
            max-width: 235px;
            max-height: 400px;
            margin-left: 45px;
            margin-top: -22px;
@@ -71,7 +70,7 @@
        }
    }
-    .highlight {
+    .adf-highlight {
        color: mat-color($primary, 900);
    }
 }
@@ -21,7 +21,7 @@
            <mat-expansion-panel-header>
                <mat-panel-title>{{ facetQueriesLabel | translate }}</mat-panel-title>
            </mat-expansion-panel-header>
-            <div class="facet-result-filter">
+            <div class="adf-facet-result-filter">
                <mat-form-field>
                    <input
                        matInput
@@ -35,7 +35,7 @@
                    </button>
                </mat-form-field>
            </div>
-            <div class="checklist">
+            <div class="adf-checklist">
                <ng-container *ngFor="let query of responseFacetQueries">
                    <mat-checkbox
                        [checked]="query.checked"
@@ -44,13 +44,13 @@
                        <div 
                            matTooltip="{{ query.label | translate }} ({{ query.count }})"
                            matTooltipPosition="right"
-                            class="facet-label">
+                            class="adf-facet-label">
                            {{ query.label | translate }} ({{ query.count }})
                        </div>
                    </mat-checkbox>
                </ng-container>
            </div>
-            <div class="facet-buttons">
+            <div class="adf-facet-buttons">
                <button mat-icon-button
                    *ngIf="canResetSelectedQueries"
                    title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
@@ -80,7 +80,7 @@
                <mat-panel-title>{{ field.label | translate }}</mat-panel-title>
            </mat-expansion-panel-header>
-            <div class="facet-result-filter">
+            <div class="adf-facet-result-filter">
                <mat-form-field>
                    <input
                        matInput
@@ -95,7 +95,7 @@
                </mat-form-field>
            </div>
-            <div class="checklist">
+            <div class="adf-checklist">
                <mat-checkbox
                    *ngFor="let bucket of field.buckets"
                    [checked]="bucket.checked"
@@ -104,7 +104,7 @@
                    <div 
                        matTooltip="{{ bucket.display || bucket.label | translate }}"
                        matTooltipPosition="right"
-                        class="facet-label">
+                        class="adf-facet-label">
                        {{ bucket.display || bucket.label | translate }} 
                        <span *ngIf="bucket.count!==null">(</span>
                        {{ bucket.count }}
@@ -113,7 +113,7 @@
                </mat-checkbox>
            </div>
-            <div class="facet-buttons" *ngIf="field.buckets.fitsPage">
+            <div class="adf-facet-buttons" *ngIf="field.buckets.fitsPage">
                <button *ngIf="canResetSelectedBuckets(field)"
                    mat-button
                    color="primary"
@@ -122,7 +122,7 @@
                </button>
            </div>
-            <div class="facet-buttons" *ngIf="!field.buckets.fitsPage">
+            <div class="adf-facet-buttons" *ngIf="!field.buckets.fitsPage">
                <button mat-icon-button
                    *ngIf="canResetSelectedBuckets(field)"
                    title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
@@ -1,6 +1,6 @@
 .adf-search-filter {
-    .checklist {
+    .adf-checklist {
        display: flex;
        flex-direction: column;
@@ -14,7 +14,7 @@
            width: 100%;
        }
-        .facet-label {
+        .adf-facet-label {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
@@ -29,7 +29,7 @@
        }
    }
-    .facet-result-filter {
+    .adf-facet-result-filter {
        display: flex;
        flex-direction: column;
@@ -38,7 +38,7 @@
        }
    }
-    .facet-buttons {
+    .adf-facet-buttons {
        text-align: right;
        .mat-button {
@@ -4,7 +4,7 @@
    <mat-radio-button [attr.data-automation-id]="'search-radio-'+(option.name | translate)"
        *ngFor="let option of options"
        [value]="option.value"
-        class="facet-filter">
+        class="adf-facet-filter">
        <div 
            matTooltip="{{ option.name | translate }}"
            matTooltipPosition="right"
@@ -8,7 +8,7 @@
        margin: 5px;
    }
-    .facet-filter {
+    .adf-facet-filter {
        .mat-radio-label-content {
            text-overflow: ellipsis;
            overflow: hidden;
@@ -19,7 +19,7 @@
            width: 100%;
        }
-        .filter-label {
+        .adf-filter-label {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
--- a/Show More
+++ b/Show More