create single scss pack and script

remove unnecessary file from pack
fix problem dev change style
fix theme picker

demo-shell/.angular-cli.json

@@ -20,8 +20,8 @@
         },
         {
           "glob": "**/*",
-          "input": "../node_modules/core/prebuilt-themes",
+          "input": "../node_modules/@alfresco/adf-core/prebuilt-themes",
-          "output": "./prebuilt-themes"
+          "output": "./assets/prebuilt-themes"
         },
         {
           "glob": "**/*",
@@ -86,6 +86,11 @@
           "input": "../resources",
           "output": "./resources"
         },
+        {
+          "glob": "**/*",
+          "input": "../../lib/core/prebuilt-themes",
+          "output": "./assets/prebuilt-themes"
+        },
         {
           "glob": "**/*",
           "input": "../../lib/core/bundles/assets",
@@ -117,7 +122,7 @@
       "prefix": "app-dev",
       "styles": [
         "styles.scss",
-        "custom-style.scss"
+        "custom-style-dev.scss"
       ],
       "stylePreprocessorOptions": {
       "includePaths": [

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

@@ -101,7 +101,7 @@ export class ThemePickerComponent {
         } else {
             this.currentTheme = this._getCurrentThemeFromHref(theme.href);
 
-            this.styleManager.setStyle('theme', `prebuilt-themes/${theme.href}`);
+            this.styleManager.setStyle('theme', `assets/prebuilt-themes/${theme.href}`);
 
             if (this.currentTheme) {
                 this._themeStorage.storeTheme(this.currentTheme);

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

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

demo-shell/src/custom-style.scss

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

demo-shell/src/styles.scss

@@ -1,5 +1,5 @@
 @import '~@angular/material/theming';
-@import './custom-style.scss';
+@import '~@alfresco/adf-core/theming';
 
 body, html {
     margin: 0;

lib/.gitignore

@@ -21,10 +21,10 @@ core/**/*.js
 core/**/*.js.map
 core/**/*.d.ts
 
-analytics/**/*.js
+insights/**/*.js
-!analytics/karma-test-shim.js
+!insights/karma-test-shim.js
-analytics/**/*.js.map
+insights/**/*.js.map
-analytics/**/*.d.ts
+insights/**/*.d.ts
 
 !config/karma-test-shim.js!
 
@@ -34,3 +34,8 @@ core/prebuilt-themes/
 /bundles/
 index.d.ts
 /.happypack
+
+process-services/_theming.scs
+content-services/_theming.scss
+core/_theming.scss
+insights/_theming.scss

lib/config/bundle-scss.js

@@ -0,0 +1,25 @@
+var Bundler = require('scss-bundle').Bundler;
+var writeFileSync = require('fs-extra').writeFileSync;
+var mkdirpSync = require('fs-extra').mkdirpSync;
+
+ new Bundler().Bundle('./core/styles/_index.scss', '**/*.scss').then(result => {
+    mkdirpSync('core');
+    writeFileSync('core/_theming.scss', result.bundledContent);
+});
+
+ new Bundler().Bundle('./insights/styles/_index.scss', '**/*.scss').then(result => {
+    mkdirpSync('insights');
+    writeFileSync('insights/_theming.scss', result.bundledContent);
+});
+
+
+ new Bundler().Bundle('./process-services/styles/_index.scss', '**/*.scss').then(result => {
+    mkdirpSync('process-services');
+    writeFileSync('process-services/_theming.scss', result.bundledContent);
+});
+
+ new Bundler().Bundle('./content-services/styles/_index.scss', '**/*.scss').then(result => {
+    mkdirpSync('content-services');
+    writeFileSync('content-services/_theming.scss', result.bundledContent);
+});
+

lib/config/webpack.common.js

@@ -130,6 +130,8 @@ module.exports = {
                     query: {
                         happyPackMode: true,
                         "compilerOptions": {
+                            "outDir": "./",
+                            "declaration": true,
                             "paths": {
                             }
                         }

lib/content-services/.npmignore

@@ -17,6 +17,10 @@ npm-debug.log
 !**/*.d.ts
 !**/adf-content-services.js
 
+**/*.scss
+**/*.css
+!**/_theming.scss
+
 coverage/
 demo/
 dist/

lib/content-services/tsconfig.json

@@ -16,7 +16,7 @@
     "noFallthroughCasesInSwitch": true,
     "removeComments": true,
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./",
     "baseUrl" :  "./",
     "paths": {
       "@alfresco/adf-process-services": ["../process-services"],

lib/core/.npmignore

@@ -16,6 +16,10 @@ npm-debug.log
 !**/*.d.ts
 !**/adf-core.js
 
+**/*.scss
+**/*.css
+!**/_theming.scss
+
 coverage/
 demo/
 dist/
@@ -24,3 +28,13 @@ typings/
 fonts/
 i18n/
 assets/
+!/prebuilt-themes/
+!/prebuilt-themes/adf-indigo-pink.css
+!/prebuilt-themes/adf-cyan-purple.css
+!/prebuilt-themes/adf-green-purple.css
+!/prebuilt-themes/adf-cyan-orange.css
+!/prebuilt-themes/adf-green-orange.css
+!/prebuilt-themes/adf-blue-purple.css
+!/prebuilt-themes/adf-blue-orange.css
+!/prebuilt-themes/adf-pink-bluegrey.css
+!/prebuilt-themes/adf-purple-green.css

lib/core/login/components/login.component.html

@@ -81,14 +81,17 @@
                                 [class.isChecking]="actualLoginStep === LoginSteps.Checking"
                                 [class.isWelcome]="actualLoginStep === LoginSteps.Welcome"
                                 data-automation-id="login-button" [disabled]="!form.valid">
-
+                            
                             <span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
 
                             <div *ngIf="actualLoginStep === LoginSteps.Checking" class="adf-interactive-login-label">
                                 <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.CHECKING' | translate }}</span>
-                                <mat-spinner id="checking-spinner" class="adf-login-checking-spinner" diameter="30"></mat-spinner>
+                                <div class="adf-login-spinner-container">
+                                    <mat-spinner id="checking-spinner" class="adf-login-checking-spinner" [diameter]="25" color="accent"></mat-spinner>
+                                </div>
                             </div>
 
+
                             <div *ngIf="actualLoginStep === LoginSteps.Welcome" class="adf-interactive-login-label">
                                 <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
                                 <mat-icon class="welcome-icon">done</mat-icon>

lib/core/login/components/login.component.scss

@@ -159,10 +159,14 @@
             justify-content: center;
         }
 
-        mat-spinner {
+        .adf-login-spinner-container{
-            height: 30px !important;
+            margin-left: 15px;
-            width: 20px !important;
+            margin-top: 5px;
-            margin-left: 10px;
+        }
+
+        #checking-spinner > svg > circle{
+            stroke-width: 16% !important;
+
         }
 
         .adf-login-controls {

lib/core/tsconfig.json

@@ -16,7 +16,7 @@
     "noFallthroughCasesInSwitch": true,
     "removeComments": true,
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./",
     "baseUrl" :  "./",
     "paths": {
       "@alfresco/adf-process-services": ["../process-services"],

lib/insights/.npmignore

@@ -16,6 +16,10 @@ npm-debug.log
 !**/*.d.ts
 !**/adf-insights.js
 
+**/*.scss
+**/*.css
+!**/_theming.scss
+
 coverage/
 demo/
 dist/

lib/insights/analytics-process/karma-test-shim.js

@@ -1,66 +0,0 @@
-Error.stackTraceLimit = Infinity;
-
-require('core-js/es6');
-require('core-js/es7/reflect');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
-
-var appContext = require.context(".", true, /\.spec\.ts/);
-appContext.keys().forEach(appContext);
-
-const TestBed = require('@angular/core/testing').TestBed;
-const browser = require('@angular/platform-browser-dynamic/testing');
-const CoreModule = require('@alfresco/adf-core').CoreModule;
-const AppConfigService = require('@alfresco/adf-core').AppConfigService;
-const AppConfigServiceMock = require('@alfresco/adf-core').AppConfigServiceMock;
-const TranslationService = require('@alfresco/adf-core').TranslationService;
-const TranslationMock = require('@alfresco/adf-core').TranslationMock;
-
-TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
-
-patchTestBedToDestroyFixturesAfterEveryTest(TestBed);
-
-beforeEach(() => {
-    TestBed.configureTestingModule({
-        imports: [CoreModule],
-        providers: [
-            {provide: AppConfigService, useClass: AppConfigServiceMock},
-            {provide: TranslationService, useClass: TranslationMock}
-        ]
-    });
-});
-
-afterEach(() => {
-    TestBed.resetTestingModule();
-});
-
-
-function patchTestBedToDestroyFixturesAfterEveryTest(testBed) {
-    // Original resetTestingModule function of the TestBed.
-    var _resetTestingModule = testBed.resetTestingModule;
-
-    // Monkey-patch the resetTestingModule to destroy fixtures outside of a try/catch block.
-    // With https://github.com/angular/angular/commit/2c5a67134198a090a24f6671dcdb7b102fea6eba
-    // errors when destroying components are no longer causing Jasmine to fail.
-    testBed.resetTestingModule = function() {
-        try {
-            if(this._activeFixtures) {
-                this._activeFixtures.forEach(function (fixture) {
-                    fixture.destroy();
-                });
-            }
-        } finally {
-            this._activeFixtures = [];
-            // Regardless of errors or not, run the original reset testing module function.
-            _resetTestingModule.call(this);
-        }
-    };
-};

lib/insights/diagram/karma-test-shim.js

@@ -1,41 +0,0 @@
-Error.stackTraceLimit = Infinity;
-
-require('core-js/es6');
-require('core-js/es7/reflect');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
-
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
-
-var appContext = require.context(".", true, /\.spec\.ts/);
-appContext.keys().forEach(appContext);
-
-const TestBed = require('@angular/core/testing').TestBed;
-const browser = require('@angular/platform-browser-dynamic/testing');
-const CoreModule = require('@alfresco/adf-core').CoreModule;
-const AppConfigService = require('@alfresco/adf-core').AppConfigService;
-const AppConfigServiceMock = require('@alfresco/adf-core').AppConfigServiceMock;
-const TranslationService = require('@alfresco/adf-core').TranslationService;
-const TranslationMock = require('@alfresco/adf-core').TranslationMock;
-
-TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
-
-beforeEach(() => {
-    TestBed.configureTestingModule({
-        imports: [CoreModule],
-        providers: [
-            {provide: AppConfigService, useClass: AppConfigServiceMock},
-            {provide: TranslationService, useClass: TranslationMock}
-        ]
-    });
-});
-
-afterEach(() => {
-    TestBed.resetTestingModule();
-});

lib/insights/mock/apps-list.mock.js

@@ -1,79 +0,0 @@
-"use strict";
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-var task_list_1 = require("../task-list");
-exports.nonDeployedApps = [new task_list_1.AppDefinitionRepresentationModel({
-        id: '1',
-        name: '1',
-        icon: 'icon1'
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: '1',
-        name: '2',
-        icon: 'icon2'
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: '1',
-        name: '3',
-        icon: 'icon3'
-    })];
-exports.deployedApps = [new task_list_1.AppDefinitionRepresentationModel({
-        id: 1,
-        name: 'App1',
-        icon: 'icon1',
-        deploymentId: '1',
-        defaultAppId: 'fake-app-1',
-        modelId: null,
-        tenantId: null
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: 2,
-        name: 'App2',
-        icon: 'icon2',
-        deploymentId: '2',
-        modelId: null,
-        tenantId: null
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: 3,
-        name: 'App3',
-        icon: 'icon3',
-        deploymentId: '3',
-        modelId: null,
-        tenantId: null
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: 4,
-        name: 'App4',
-        icon: 'icon4',
-        deploymentId: '4',
-        modelId: 65,
-        tenantId: null
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: 5,
-        name: 'App5',
-        icon: 'icon5',
-        deploymentId: '5',
-        modelId: 66,
-        tenantId: 9
-    }), new task_list_1.AppDefinitionRepresentationModel({
-        id: 6,
-        name: 'App6',
-        icon: 'icon6',
-        deploymentId: '6',
-        tenantId: 9,
-        modelId: 66
-    })];
-exports.defaultApp = [new task_list_1.AppDefinitionRepresentationModel({
-        defaultAppId: 'tasks'
-    })];

lib/insights/tsconfig.json

@@ -16,7 +16,7 @@
     "noFallthroughCasesInSwitch": true,
     "removeComments": true,
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./",
     "baseUrl" :  "./",
     "paths": {
       "@alfresco/adf-process-services": ["../process-services"],

lib/package.json

@@ -9,7 +9,8 @@
     "rimraf": "rimraf",
     "build": "npm run webpack -- --config config/webpack.build.js --progress --profile --bail && npm run build-style && npm run bundlesize-check",
     "test": "node node_modules/karma/bin/karma start --reporters mocha,coverage --single-run --component .",
-    "build-style": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
+    "build-style": "npm run bundle-scss && npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
+    "bundle-scss": "node ./config/bundle-scss.js",
     "test-browser": "node node_modules/karma/bin/karma start karma.conf.js --reporters kjhtml",
     "coverage": "",
     "prepublishOnly": "npm run build",

lib/process-services/.npmignore

@@ -16,6 +16,10 @@ npm-debug.log
 !**/*.d.ts
 !**/adf-process-services.js
 
+**/*.scss
+**/*.css
+!**/_theming.scss
+
 coverage/
 demo/
 dist/

lib/process-services/_theming.scss

@@ -0,0 +1,449 @@
+@mixin adf-process-filters-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .adf {
+
+        &-filters__entry {
+            cursor: pointer;
+            font-size: 14px!important;
+            font-weight: bold;
+            opacity: .54;
+            padding-left: 30px;
+
+            .mat-list-item-content {
+                height: 34px;
+            }
+            &.active, &:hover {
+                color: mat-color($primary);
+                opacity: 1;
+            }
+        }
+
+        &-filters__entry-icon {
+            padding-right: 12px !important;
+            padding-left: 0px !important;
+        }
+
+    }
+
+}
+
+
+@mixin adf-task-list-comment-list-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .adf {
+
+        &-comment-img-container {
+            float: left;
+            width: 40px;
+            padding: 5px 10px;
+            height: 100%;
+        }
+
+        &-comment-user-icon {
+            padding: 10px 5px;
+            width: 30px;
+            background-color: mat-color($primary);
+            border-radius: 50%;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            height: 18px;
+            background-size: cover;
+        }
+
+        &-comment-user-name {
+            float: left;
+            width: calc(100% - 120px);
+            padding: 2px 10px;
+            font-weight: 600;
+            color: #595959;
+        }
+
+        &-comment-message {
+            float: left;
+            width: calc(100% - 10px);
+            padding: 2px 10px;
+            font-style: italic;
+            color: #595959;
+            white-space: initial;
+        }
+
+        &-comment-message-time {
+            float: left;
+            width: calc(100% - 120px);
+            padding: 2px 10px;
+            font-size: 12px;
+            color: #595959;
+        }
+
+        &-comment-contents {
+            float: left;
+            width: calc(100% - 10px);
+        }
+
+        &-datatable ::ng-deep table {
+            border: none !important;
+            tbody td {
+                padding: 0px !important;
+                border-top: none !important;
+            }
+        }
+
+        &-people-img {
+            border-radius: 90%;
+            width: 40px;
+            height: 40px;
+            vertical-align: middle;
+        }
+
+    }
+}
+
+
+
+
+
+@mixin adf-task-list-people-search-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
+    .adf-people-search {
+        width: 100%;
+
+        .activiti-label {
+            font-weight: bolder;
+        }
+
+        .fix-element-user-list {
+            padding-top: 0px;
+            padding-right: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+        }
+
+        .search-text-header {
+            font-weight: bold;
+            opacity: 0.54;
+        }
+
+        .search-text-container {
+            width: 100%;
+
+            input {
+                line-height: normal;
+            }
+        }
+
+        .search-list-container {
+            max-height: 152px;
+            width: 100%;
+            overflow-y: auto;
+        }
+
+        adf-people-list ::ng-deep adf-datatable ::ng-deep thead {
+            display: none;
+        }
+
+        .search-list-action-container {
+            border-top: 1px solid #eee;
+            text-align: right;
+            padding: 5px 0px;
+            margin-top: 5px;
+            > button {
+                opacity: 0.54;
+                font-weight: bolder;
+                &:hover {
+                    color: mat-color($primary);
+                }
+            }
+        }
+
+        .people-pic {
+            background: mat-color($primary);
+            width: 30px;
+            padding: 10px 5px;
+            border-radius: 90%;
+            color: #fff;
+            text-align: center;
+            font-weight: bolder;
+            font-size: 18px;
+            text-transform: uppercase;
+            vertical-align: text-bottom;
+        }
+
+        .people-img {
+            border-radius: 90%;
+            width: 40px;
+            height: 40px;
+            vertical-align: middle;
+        }
+    }
+}
+
+@mixin adf-task-list-people-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .assignment-header {
+        border-bottom: 1px solid #eee;
+        padding: 6px 20px;
+    }
+
+    .assigment-count {
+        float: left;
+        padding: 10px 0px;
+        font-weight: bolder;
+        opacity: 0.54;
+    }
+
+    .add-people {
+        float: right;
+        padding: 8px;
+        height: 26px;
+        opacity: 0.54;
+        cursor: pointer;
+        &:hover {
+            color: mat-color($primary);
+        }
+    }
+
+    .assignment-top-container.mat-card {
+        border-top: 2px solid #eee;
+        margin: 0px;
+        padding: 0px;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: stretch;
+    }
+
+    .assignment-top-container-content {
+        display: flex;
+        flex-flow: column;
+        align-items: stretch;
+        flex: 1 0 auto;
+        max-width: 100%;
+    }
+
+    .assignment-container {
+        padding: 10px 20px;
+        border-bottom: 1px solid #eee;
+        max-width: 100%;
+    }
+
+    .assignment-list-container {
+        padding: 0px;
+    }
+
+    adf-people-list ::ng-deep adf-datatable ::ng-deep {
+        thead {
+            display: none;
+        }
+        .people-email {
+            opacity: 0.54;
+        }
+    }
+
+    .people-img {
+        border-radius: 90%;
+        width: 40px;
+        height: 40px;
+        vertical-align: middle;
+    }
+
+    .adf-people-search-people-pic {
+        background: mat-color($primary);
+        width: 30px;
+        padding: 10px 5px;
+        border-radius: 100px;
+        color: #fff;
+        text-align: center;
+        font-weight: bolder;
+        font-size: 18px;
+        text-transform: uppercase;
+        vertical-align: text-bottom;
+    }
+}
+
+
+@mixin adf-task-list-start-task-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
+    .adf-new-task-heading {
+        padding: 12px 20px;
+        font-weight: bold;
+        border-bottom: 1px solid #eee;
+        font-size: 18px;
+        float: left;
+        text-align: left;
+        width: calc(100% - 40px);
+    }
+
+    .adf-new-task-layout-card {
+        width: 66.6667%;
+        margin-right: calc(33.3333% / 2 - 24px);
+        margin-left: calc(33.3333% / 2 - 24px);
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding: 0px;
+    }
+
+    .adf-new-task-footer {
+        padding: 4px;
+        font-size: 18px;
+        border-top: 1px solid #eee;
+        float: left;
+        width: calc(100% - 40px);
+        text-align: right;
+    }
+
+    .adf-start-task-input-container {
+        width: 80%;
+    }
+
+    .adf-new-task-text-width {
+        width: 90%;
+    }
+
+    .adf-mat-select {
+        padding-top: 0px;
+    }
+
+    adf-start-task {
+        .adf {
+
+            &-start-task-input-container .mat-input-wrapper {
+                padding-top: 8px;
+            }
+
+            &-error-text-container {
+                position: absolute;
+                width: 81%;
+                height: 20px;
+                margin-top: 30px;
+            }
+
+            &-error-text {
+                padding: 1px;
+                height: 16px;
+                font-size: 12px;
+                line-height: 1.33;
+                float: left;
+                color: mat-color($warn);
+            }
+
+            &-error-icon {
+                float: right;
+                font-size: 17px;
+                color: mat-color($warn);
+            }
+
+            &-label {
+                color: rgb(186, 186, 186);;
+            }
+
+            &-invalid {
+
+                .mat-input-underline {
+                    background-color: #f44336 !important;
+                }
+
+                .adf-file {
+                    border-color: mat-color($warn);
+                }
+
+                .mat-input-prefix {
+                    color: mat-color($warn);
+                }
+
+                .adf-input {
+                    border-color: mat-color($warn);
+                }
+
+                .adf-label {
+                    color: mat-color($warn);
+                    &:after {
+                        background-color: mat-color($warn);
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin adf-task-list-filters-task-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .adf {
+
+        &-filters__entry {
+            cursor: pointer;
+            font-size: 14px!important;
+            font-weight: bold;
+            opacity: .54;
+            padding-left: 30px;
+
+            .mat-list-item-content {
+                height: 34px;
+            }
+        }
+
+        &-filters__entry-icon {
+            padding-right: 12px !important;
+            padding-left: 0px !important;
+        }
+
+        &-filters__entry {
+            &.active, &:hover {
+                color: mat-color($primary);
+                opacity: 1;
+            }
+        }
+
+    }
+}
+
+@mixin adf-task-list-header-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .adf {
+        &-controls {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &-edit-controls {
+            display: flex;
+            justify-content: flex-end;
+            margin-left: auto;
+        }
+
+        &-switch-to-edit-mode,
+        &-save-edit-mode {
+            color: mat-color($primary);
+        }
+
+        &-cancel-edit-mode,
+        &-claim-controls {
+            color: rgb(131, 131, 131);
+        }
+
+        &-card-container {
+            font-family: inherit;
+        }
+    }
+}
+
+
+@mixin adf-process-services-theme($theme) {
+    @include adf-process-filters-theme($theme);
+    @include adf-task-list-comment-list-theme($theme);
+    @include adf-task-list-start-task-theme($theme);
+    @include adf-task-list-people-search-theme($theme);
+    @include adf-task-list-people-theme($theme);
+    @include adf-task-list-filters-task-theme($theme);
+    @include adf-task-list-header-theme($theme);
+}

lib/process-services/tsconfig.json

@@ -16,7 +16,7 @@
     "noFallthroughCasesInSwitch": true,
     "removeComments": true,
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./",
     "baseUrl" :  "./",
     "paths": {
       "@alfresco/adf-process-services": ["../process-services"],