code fixes

- interpolate ng2 components html content
- fix: load images for Login
- fix: load images for User Info
- fix: load images for Document List
- fix: decorator inheritance issue for Form
- fix: load images for Search

demo-shell-ng2/config/webpack.common.js

@@ -56,8 +56,17 @@ module.exports = {
       },
       {
         test: /\.html$/,
+        exclude: alfrescoLibs,
         loader: 'html'
       },
+      {
+        test: /\.html$/,
+        include: alfrescoLibs,
+        loader: 'html',
+        query: {
+            interpolate: true
+        }
+      },
       {
         test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
         loader: 'file?name=assets/[name].[hash].[ext]'

demo-shell-ng2/index.html

@@ -21,22 +21,18 @@
 
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <!--<script src="node_modules/intl/dist/Intl.min.js"></script>-->
-    <!--<script src="node_modules/intl/locale-data/jsonp/en.js"></script>-->
+    <script src="node_modules/intl/dist/Intl.min.js"></script>
+    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
     <!--<script src="node_modules/core-js/client/shim.min.js"></script>-->
-    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>-->
-    <!--<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>-->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
+    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
 
     <!-- Polyfill(s) for dialogs -->
     <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
     <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css" />
 
-    <!--<script src="node_modules/zone.js/dist/zone.js"></script>-->
-    <!--<script src="node_modules/reflect-metadata/Reflect.js"></script>-->
-    <!--<script src="node_modules/systemjs/dist/system.src.js"></script>-->
-
     <script src="node_modules/moment/min/moment.min.js"></script>
     <script src="/app/js/Polyline.js"></script>
     <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
@@ -49,16 +45,9 @@
     <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
 
     <!-- Stencils integration -->
-    <!--<script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>-->
-    <!--<script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>-->
+    <script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
+    <script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
 
-    <!-- 2. Configure SystemJS -->
-    <!--<script src="systemjs.config.js"></script>-->
-    <!--
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-    -->
     <style>
         .main_header_adf .mdl-layout__drawer-button {
             right: 0 !important;

demo-shell-ng2/package.json

@@ -132,7 +132,9 @@
     "typescript": "^2.0.3",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
-    "webpack-merge": "^0.14.0"
+    "webpack-merge": "^0.14.0",
+
+    "url-loader": "^0.5.7"
   },
   "license-check-config": {
     "src": [

demo-shell-ng2/systemjs.config.js

@@ -1,76 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'app',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-charts' : 'npm:ng2-charts',
-            'ng2-translate': 'npm:ng2-translate',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
-            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
-            'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
-            'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
-            'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
-            'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
-            'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
-            'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist',
-            'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
-            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist',
-            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { defaultExtension: 'js' },
-
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'}
-        }
-    });
-})(this);

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts

@@ -15,16 +15,24 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
-import { DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
+import { Component, Input } from '@angular/core';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
 
 @Component({
     selector: 'alf-boolean-editor',
     templateUrl: './boolean.editor.html',
     styleUrls: ['./boolean.editor.css']
 })
-export class BooleanEditorComponent extends CellEditorComponent {
+export class BooleanEditorComponent {
+
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
 
     onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: any) {
         let value: boolean = (<HTMLInputElement>event.target).checked;

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.spec.ts

@@ -1,42 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CellEditorComponent } from './cell.editor';
-
-describe('CellEditorComponent', () => {
-
-    class CustomEditor extends CellEditorComponent {
-        onError(error: any) {
-            this.handleError(error);
-        }
-    }
-
-    let component: CustomEditor;
-
-    beforeEach(() => {
-        component = new CustomEditor();
-    });
-
-    it('should handle error', () => {
-        const error = 'error';
-        spyOn(console, 'error').and.stub();
-
-        component.onError(error);
-        expect(console.error).toHaveBeenCalledWith(error);
-    });
-
-});

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.ts

@@ -1,36 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Input } from '@angular/core';
-import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../dynamic-table.widget.model';
-
-export abstract class CellEditorComponent {
-
-    @Input()
-    table: DynamicTableModel;
-
-    @Input()
-    row: DynamicTableRow;
-
-    @Input()
-    column: DynamicTableColumn;
-
-    handleError(error: any) {
-        console.error(error);
-    }
-
-}

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ElementRef } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
+import { Component, Input, OnInit, ElementRef } from '@angular/core';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
 
 @Component({
     selector: 'alf-date-editor',
     templateUrl: './date.editor.html',
     styleUrls: ['./date.editor.css']
 })
-export class DateEditorComponent extends CellEditorComponent implements OnInit {
+export class DateEditorComponent implements OnInit {
 
     DATE_FORMAT: string = 'DD-MM-YYYY';
 
@@ -31,9 +31,16 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit {
     settings: any;
     value: any;
 
-    constructor(private elementRef: ElementRef) {
-        super();
-    }
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
+
+    constructor(private elementRef: ElementRef) {}
 
     ngOnInit() {
         this.settings = {

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts

@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
-import { DynamicTableRow, DynamicTableColumn, DynamicTableColumnOption } from './../../dynamic-table.widget.model';
+import { Component, Input, OnInit } from '@angular/core';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn, DynamicTableColumnOption } from './../../dynamic-table.widget.model';
 import { FormService } from './../../../../../services/form.service';
 
 @Component({
@@ -25,14 +24,21 @@ import { FormService } from './../../../../../services/form.service';
     templateUrl: './dropdown.editor.html',
     styleUrls: ['./dropdown.editor.css']
 })
-export class DropdownEditorComponent extends CellEditorComponent implements OnInit {
+export class DropdownEditorComponent implements OnInit {
 
     value: any = null;
     options: DynamicTableColumnOption[] = [];
 
-    constructor(private formService: FormService) {
-        super();
-    }
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
+
+    constructor(private formService: FormService) {}
 
     ngOnInit() {
         let field = this.table.field;
@@ -89,4 +95,8 @@ export class DropdownEditorComponent extends CellEditorComponent implements OnIn
         value = column.options.find(opt => opt.name === value);
         row.value[column.id] = value;
     }
+
+    handleError(error: any) {
+        console.error(error);
+    }
 }

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts

@@ -15,16 +15,24 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
-import { DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
+import { Component, Input, OnInit } from '@angular/core';
+import { DynamicTableRow, DynamicTableColumn, DynamicTableModel } from './../../dynamic-table.widget.model';
 
 @Component({
     selector: 'alf-text-editor',
     templateUrl: './text.editor.html',
     styleUrls: ['./text.editor.css']
 })
-export class TextEditorComponent extends CellEditorComponent implements OnInit {
+export class TextEditorComponent implements OnInit {
+
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
 
     displayName: string;
 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -15,7 +15,7 @@
                     <div class="document-list__this-space-is-empty">This folder is empty</div>
                     <div class="document-list__drag-drop">Drag and Drop</div>
                     <div class="document-list__any-files-here-to-add">any files here to add</div>
-                    <img [src]="baseComponentPath + '/img/empty_doc_lib.svg'" class="document-list__empty_doc_lib">
+                    <img src="./../img/empty_doc_lib.svg" class="document-list__empty_doc_lib">
                 </div>
             </template>
         </no-content-template>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -53,8 +53,6 @@ export class DocumentList implements OnInit, AfterContentInit {
 
     DEFAULT_ROOT_FOLDER: string = '/';
 
-    baseComponentPath = module.id.replace('/components/document-list.js', '');
-
     @Input()
     set rootPath(value: string) {
         this.data.rootPath = value || this.data.DEFAULT_ROOT_PATH;
@@ -68,7 +66,7 @@ export class DocumentList implements OnInit, AfterContentInit {
     }
 
     @Input()
-    fallbackThubnail: string = this.baseComponentPath + '/img/ft_ic_miscellaneous.svg';
+    fallbackThubnail: string = require('./../img/ft_ic_miscellaneous.svg');
 
     @Input()
     navigate: boolean = true;
@@ -155,7 +153,7 @@ export class DocumentList implements OnInit, AfterContentInit {
         private ngZone: NgZone,
         private translate: AlfrescoTranslationService) {
 
-        this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath, []);
+        this.data = new ShareDataTableAdapter(this.documentListService, './..', []);
 
         if (translate) {
             translate.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/dist/src');

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts

@@ -56,7 +56,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
     rootPath: string = this.DEFAULT_ROOT_PATH;
 
     constructor(private documentListService: DocumentListService,
-                private basePath: string,
+                basePath: string,
                 schema: DataColumn[]) {
         this.dataLoaded = new DataLoadedEventEmitter();
         this.rows = [];
@@ -154,7 +154,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
                 let node = (<ShareDataRow> row).node;
 
                 if (node.entry.isFolder) {
-                    return `${this.basePath}/img/ft_ic_folder.svg`;
+                    return this.getImagePath('ft_ic_folder.svg');
                 }
 
                 if (node.entry.isFile) {
@@ -171,13 +171,13 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
                         if (mimeType) {
                             let icon = this.documentListService.getMimeTypeIcon(mimeType);
                             if (icon) {
-                                return `${this.basePath}/img/${icon}`;
+                                return this.getImagePath(icon);
                             }
                         }
                     }
                 }
 
-                return `${this.basePath}/img/ft_ic_miscellaneous.svg`;
+                return this.getImagePath('ft_ic_miscellaneous.svg');
             }
 
         }
@@ -312,6 +312,10 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
         this.rows = rows;
     }
 
+    getImagePath(id: string): any {
+        return require(`./../img/${id}`);
+    }
+
     private resetPagination() {
         this._count = 0;
         this._hasMoreItems = false;

ng2-components/ng2-alfresco-documentlist/tslint.json

@@ -53,7 +53,7 @@
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css

@@ -53,7 +53,7 @@
     margin-top: 5px;
 }
 
-:host .alfresco-logo > img {
+:host .alfresco-logo img {
     max-height: 43px;
 }
 
@@ -195,3 +195,8 @@
 .alfresco-login__password .icon-inline {
     left: 90%;
 }
+
+.alfresco-login__container {
+    background-size: cover;
+    background-position: center;
+}

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html

@@ -1,9 +1,10 @@
-<div class="content-grid mdl-grid content-layout login-content"
-    [style.background-image]="'url(' + (backgroundImageUrl || baseComponentPath + '/../assets/images/background.svg') + ')'">
+<div class="content-grid mdl-grid content-layout login-content alfresco-login__container"
+    style="background-image: url(${require(`./background.svg`)})">
     <div class="login-card-wide mdl-card mdl-shadow--4dp">
         <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
-                <img class="center" [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'" alt="{{'LOGIN.LOGO' | translate }}">
+                <img *ngIf="logoImageUrl" class="center" [src]="logoImageUrl" alt="{{'LOGIN.LOGO' | translate }}">
+                <img *ngIf="!logoImageUrl" class="center" src="./../assets/images/alfresco-logo.svg" alt="{{'LOGIN.LOGO' | translate }}">
             </div>
             <div class="mdl-card__supporting-text">
                 <div>

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -33,16 +33,11 @@ declare let componentHandler: any;
 })
 export class AlfrescoLoginComponent implements OnInit {
 
-    baseComponentPath = module.id.replace('/alfresco-login.component.js', '');
-
     isPasswordShow: boolean = false;
 
     @Input()
     logoImageUrl: string;
 
-    @Input()
-    backgroundImageUrl: string;
-
     @Input()
     providers: string;
 

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts

@@ -130,8 +130,6 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
             spyOn(searchService, 'getQueryNodesPromise')
                 .and.returnValue(Promise.resolve(result));
 
-            component.baseComponentPath = 'http://localhost';
-
             let thumbnailService = fixture.debugElement.injector.get(AlfrescoThumbnailService);
             spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg');
             spyOn(thumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE');
@@ -140,7 +138,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
                 fixture.detectChanges();
                 let imgEl = <any> element.querySelector('#result_row_0 img');
                 expect(imgEl).not.toBeNull();
-                expect(imgEl.src).toBe('http://localhost/img/fake-type-icon.svg');
+                expect(imgEl.src).toBe('../img/fake-type-icon.svg');
                 expect(imgEl.alt).toBe('SEARCH.ICONS.FAKE_TYPE');
                 done();
             });

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts

@@ -27,8 +27,6 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 })
 export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
 
-    baseComponentPath = module.id.replace('/components/alfresco-search-autocomplete.component.js', '');
-
     @Input()
     searchTerm: string = '';
 
@@ -125,7 +123,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
     getMimeTypeIcon(node: any): string {
         if (node.entry.content && node.entry.content.mimeType) {
             let icon = this.alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
-            return `${this.baseComponentPath}/img/${icon}`;
+            return require(`./../img/${icon}`);
         }
     }
 

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts

@@ -28,8 +28,6 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 })
 export class AlfrescoSearchComponent implements OnChanges, OnInit {
 
-    baseComponentPath = module.id.replace('/components/alfresco-search.component.js', '');
-
     @Input()
     searchTerm: string = '';
 
@@ -92,7 +90,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     getMimeTypeIcon(node: any): string {
         if (node.entry.content && node.entry.content.mimeType) {
             let icon = this._alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
-            return `${this.baseComponentPath}/img/${icon}`;
+            return require(`./../img/${icon}`);
         }
     }
 

ng2-components/ng2-alfresco-search/tslint.json

@@ -53,7 +53,7 @@
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css

@@ -3,17 +3,17 @@
 }
 
 .tag-element {
-    padding: 0px 0px 0px 9px!important;
+    padding: 0px 0px 0px 9px !important;
 }
 
 .tag-input {
     float: left;
-    margin-left: 11px!important;
+    margin-left: 11px !important;
 }
 
 .tag-label {
-    left: 10px;!important;
-    top: 12px;!important;
+    left: 10px !important;
+    top: 12px !important;
 }
 
 .tag-container-input{

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css

@@ -80,7 +80,3 @@ img.profile-picture {
     margin-left: 0px;
     margin-right: 8px;
 }
-
-.menu-container__items{
-
-}

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html

@@ -1,11 +1,8 @@
 <div id="userinfo_container" *ngIf="isLoggedIn()">
     <div *ngIf="ecmUser || bpmUser">
         <div class="button-profile" id="user-profile" data-automation-id="user-profile">
-            <img id="logged-user-img"
-                [src]="getUserAvatar()"
-                alt="user-info-profile-button"
-                (error)="onImageLoadingError($event)"
-                class="profile-image"/>
+            <img *ngIf="getUserAvatar()" [src]="getUserAvatar()" (error)="bpmUserImage = null; ecmUserImage = null;" id="logged-user-img" class="profile-image" alt="user-info-profile-button">
+            <img *ngIf="!getUserAvatar()" src="./anonymous.gif" id="logged-user-img" class="profile-image" alt="user-info-profile-button">
         </div>
         <div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect"
             [class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false"
@@ -19,27 +16,22 @@
                 <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
                     <div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
                         <div class="demo-card-wide mdl-card">
-                            <div class="card-title__option mdl-card__title"
-                                id="ecm-background-image"
-                                [style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
-                                <img class="profile-picture"
-                                    id="ecm-user-detail-image"
-                                    alt="ecm-profile-image"
-                                    (error)="onImageLoadingError($event)"
-                                    [src]="getEcmUserAvatar()"/>
+                            <div class="card-title__option mdl-card__title user-info__ecm-background" id="ecm-background-image"
+                                style="background-image: url(${require(`./ecm-background.png`)})">
+                                <img *ngIf="ecmUserImage" [src]="ecmUserImage" (error)="ecmUserImage = null" class="profile-picture" id="ecm-user-detail-image" alt="ecm-profile-image">
+                                <img *ngIf="!ecmUserImage" src="./anonymous.gif" class="profile-picture" id="ecm-user-detail-image" alt="ecm-profile-image">
                                 <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
                             </div>
                             <div class="mdl-card__supporting-text">
                                 <li class="mdl-list__item mdl-list__item--two-line">
                                     <span class="mdl-list__item-primary-content">
-                                    <span id="ecm-full-name" class="truncate-long-names">
-                                        {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
-                                    </span>
-                                    <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
+                                        <span id="ecm-full-name" class="truncate-long-names">
+                                            {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
+                                        </span>
+                                        <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
                                     </span>
                                     <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
-                                        <span
-                                            class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
+                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
                                         {{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
                                     </span>
                                 </li>
@@ -50,28 +42,24 @@
                 <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
                     <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
                         <div class="demo-card-wide mdl-card">
-                            <div class="card-title__option mdl-card__title"
-                                id="bpm-background-image"
-                                [style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
-                                <img class="profile-picture"
-                                    id="bpm-user-detail-image"
-                                    alt="bpm-profile-image"
-                                    (error)="onImageLoadingError($event)"
-                                    [src]="getBpmUserAvatar()"/>
+                            <div class="card-title__option mdl-card__title user-info__bpm-background" id="bpm-background-image"
+                                style="background-image: url(${require(`./bpm-background.png`)})">
+                                <img *ngIf="bpmUserImage" [src]="bpmUserImage" class="profile-picture" (error)="bpmUserImage = null" id="bpm-user-detail-image" alt="bpm-profile-image">
+                                <img *ngIf="!bpmUserImage" src="./anonymous.gif" class="profile-picture" id="bpm-user-detail-image" alt="bpm-profile-image">
                                 <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
                             </div>
                             <div class="mdl-card__supporting-text">
                                 <li class="mdl-list__item mdl-list__item--two-line">
-                            <span class="mdl-list__item-primary-content">
-                            <span id="bpm-full-name" class="truncate-long-names">
-                                {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
-                            </span>
-                            <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
-                            </span>
+                                    <span class="mdl-list__item-primary-content">
+                                        <span id="bpm-full-name" class="truncate-long-names">
+                                            {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
+                                        </span>
+                                        <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
+                                    </span>
                                     <span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
-                                <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
-                                {{bpmUser.tenantName}}
-                            </span>
+                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
+                                        {{bpmUser.tenantName}}
+                                    </span>
                                 </li>
                             </div>
                         </div>

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts

@@ -125,6 +125,7 @@ describe('User info component', () => {
         expect(res).toEqual('fake-value');
     });
 
+    /*
     it('should return the anonymous avatar when users do not have images', () => {
         let event = <any> {
             target: {
@@ -134,6 +135,7 @@ describe('User info component', () => {
         userInfoComp.onImageLoadingError(event);
         expect(event.target.src).toContain('src/img/anonymous.gif');
     });
+    */
 
     describe('when user is logged on ecm', () => {
 
@@ -204,7 +206,7 @@ describe('User info component', () => {
         describe('and has no image', () => {
 
             beforeEach(async(() => {
-                userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+                // userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
                 spyOn(stubContent, 'getContentUrl').and.returnValue('wrongImage.gif');
                 fixture.detectChanges();
                 jasmine.Ajax.requests.mostRecent().respondWith({
@@ -250,7 +252,7 @@ describe('User info component', () => {
         });
 
         beforeEach(async(() => {
-            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+            // userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
             fixture.detectChanges();
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
@@ -329,7 +331,7 @@ describe('User info component', () => {
             spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
             spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
             spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
-            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+            // userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
             jasmine.Ajax.install();
             fakeBpmUser.firstName = 'fake-bpm-first-name';
             fakeBpmUser.lastName = 'fake-bpm-last-name';

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts

@@ -31,29 +31,14 @@ declare let componentHandler: any;
 })
 export class UserInfoComponent implements OnInit {
 
-    @Input()
-    ecmBackgroundImage: string;
-
-    @Input()
-    bpmBackgroundImage: string;
-
     @Input()
     menuOpenType: string = 'right';
 
-    @Input()
-    fallBackThumbnailImage: string;
-
-    private baseComponentPath = module.id.replace('components/user-info.component.js', '');
-
     ecmUser: EcmUserModel;
-
     bpmUser: BpmUserModel;
 
-    anonymousImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
-
-    bpmUserImage: any;
-
-    ecmUserImage: any;
+    bpmUserImage: string;
+    ecmUserImage: string;
 
     constructor(private ecmUserService: EcmUserService,
                 private bpmUserService: BpmUserService,
@@ -86,7 +71,7 @@ export class UserInfoComponent implements OnInit {
             this.ecmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
                         this.ecmUser = <EcmUserModel> res;
-                        this.getEcmAvatar();
+                        this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
                     }
                 );
         }
@@ -102,13 +87,6 @@ export class UserInfoComponent implements OnInit {
         }
     }
 
-    onImageLoadingError(event) {
-        if (event) {
-            let element = <any> event.target;
-            element.src = this.fallBackThumbnailImage || this.anonymousImageUrl;
-        }
-    }
-
     stopClosing(event) {
         event.stopPropagation();
     }
@@ -125,22 +103,10 @@ export class UserInfoComponent implements OnInit {
         }
     }
 
-    private getEcmAvatar() {
-        this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
-    }
-
     getUserAvatar() {
         return this.ecmUserImage || this.bpmUserImage;
     }
 
-    getBpmUserAvatar() {
-        return this.bpmUserImage;
-    }
-
-    getEcmUserAvatar() {
-        return this.ecmUserImage;
-    }
-
     formatValue(value: string) {
         return value === 'null' ? null : value;
     }