Clean and minimal DocumentList component implementation

demo-shell-ng2/app/app.component.ts

@@ -6,7 +6,7 @@ import {AuthRouterOutlet} from './components/AuthRouterOutlet';
 import {HomeView} from './components/home.view';
 import {Page1View} from './components/page1.view';
 import {Page2View} from './components/page2.view';
-import {AlfrescoService} from '../../ng2-components/ng2-alfresco-documentslist/src/alfresco.service';
+import {AlfrescoService} from 'ng2-alfresco-documentlist/component';
 
 @Component({
     selector: 'my-app',

demo-shell-ng2/app/components/home.view.ts

@@ -1,5 +1,5 @@
 import {Component} from 'angular2/core';
-import {DocumentList} from '../../../ng2-alfresco-documentslist/src/components';
+import {DocumentList} from 'ng2-alfresco-documentlist/component';
 
 @Component({
     selector: 'home-view',

demo-shell-ng2/app/components/page2.view.ts

@@ -1,5 +1,4 @@
 import {Component} from 'angular2/core';
-import {HelloWorld} from '../../../ng2-alfresco-documentslist/src/components';
 
 @Component({
     selector: 'page2-view',
@@ -7,11 +6,9 @@ import {HelloWorld} from '../../../ng2-alfresco-documentslist/src/components';
         <div class="container">
             <div class="row">
                 <h2>Page 2</h2>
-                <hello-world></hello-world>
             </div>
         </div>
-    `,
-    directives: [HelloWorld]
+    `
 })
 export class Page2View {
 

demo-shell-ng2/app/main.ts

@@ -3,7 +3,7 @@ import {AppComponent} from './app.component';
 import {ROUTER_PROVIDERS} from 'angular2/router';
 import {HTTP_PROVIDERS}    from 'angular2/http';
 import {Authentication} from './services/authentication';
-import {ALFRESCO_PROVIDERS} from '../../ng2-alfresco-documentslist/src/components';
+import {ALFRESCO_PROVIDERS} from 'ng2-alfresco-documentlist/component';
 
 bootstrap(AppComponent, [
     ROUTER_PROVIDERS,

demo-shell-ng2/index.html

@@ -33,7 +33,7 @@
         System.config({
             map: {
                 'ng2-uploader': 'node_modules/ng2-uploader',
-                'ng2-alfresco': 'node_modules/ng2-alfresco'
+                'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist'
             },
             packages: {
                 app: {
@@ -43,7 +43,7 @@
                 'ng2-uploader': {
                     defaultExtension: 'js'
                 },
-                'ng2-alfresco': {
+                'ng2-alfresco-documentlist': {
                     defaultExtension: 'js'
                 }
             }

demo-shell-ng2/package.json

@@ -21,7 +21,7 @@
     "es6-shim": "^0.35.0",
     "font-awesome": "^4.5.0",
     "jquery": "^2.2.2",
-    "ng2-alfresco-documentslist": "file:../ng2-components/ng2-alfresco-documentslist",
+    "ng2-alfresco-documentslist": "file:../ng2-components/ng2-alfresco-documentlist",
     "ng2-uploader": "denisvuyka/ng2-uploader",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",

ng2-components/ng2-alfresco-documentlist/.gitignore

@@ -0,0 +1,5 @@
+npm-debug.log
+node_modules
+jspm_packages
+.idea
+typings

ng2-components/ng2-alfresco-documentlist/.npmignore

@@ -0,0 +1,2 @@
+/typings
+/node_modules

ng2-components/ng2-alfresco-documentlist/README.md

@@ -0,0 +1,43 @@
+# Alfresco Components for Angular 2
+
+Components included:
+
+* Document List Component
+* Alfresco Service (TBD)
+
+### Document List Component
+
+```ts
+export class MyView {
+    thumbnails: boolean = true;
+    breadcrumb: boolean = false;
+    navigation: boolean = true;
+    downloads: boolean = true;
+
+    events: any[] = [];
+
+    onItemClick($event) {
+        console.log($event.value);
+        this.events.push({
+            name: 'Item Clicked',
+            value: $event.value
+        });
+    }
+}
+```
+
+```html
+<alfresco-document-list
+    #list
+    [thumbnails]="thumbnails"
+    [breadcrumb]="breadcrumb"
+    [navigate]="navigation"
+    [downloads]="downloads"
+    (itemClick)="onItemClick($event)">
+</alfresco-document-list>
+```
+
+### Build
+
+npm install
+npm run build

ng2-components/ng2-alfresco-documentlist/component.d.ts

@@ -0,0 +1,13 @@
+import { HelloWorld } from './src/HelloWorld';
+import { DocumentList } from './src/document-list.component';
+import { AlfrescoService } from './src/alfresco.service';
+export * from './src/HelloWorld';
+export * from './src/document-list.component';
+export * from './src/alfresco.service';
+declare var _default: {
+    directives: (typeof HelloWorld | typeof DocumentList)[];
+    providers: typeof AlfrescoService[];
+};
+export default _default;
+export declare const ALFRESCO_DIRECTIVES: [any];
+export declare const ALFRESCO_PROVIDERS: [any];

ng2-components/ng2-alfresco-documentlist/component.js

@@ -0,0 +1,41 @@
+System.register(['./src/HelloWorld', './src/document-list.component', './src/alfresco.service'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var HelloWorld_1, document_list_component_1, alfresco_service_1;
+    var ALFRESCO_DIRECTIVES, ALFRESCO_PROVIDERS;
+    var exportedNames_1 = {
+        'ALFRESCO_DIRECTIVES': true,
+        'ALFRESCO_PROVIDERS': true
+    };
+    function exportStar_1(m) {
+        var exports = {};
+        for(var n in m) {
+            if (n !== "default"&& !exportedNames_1.hasOwnProperty(n)) exports[n] = m[n];
+        }
+        exports_1(exports);
+    }
+    return {
+        setters:[
+            function (HelloWorld_1_1) {
+                HelloWorld_1 = HelloWorld_1_1;
+                exportStar_1(HelloWorld_1_1);
+            },
+            function (document_list_component_1_1) {
+                document_list_component_1 = document_list_component_1_1;
+                exportStar_1(document_list_component_1_1);
+            },
+            function (alfresco_service_1_1) {
+                alfresco_service_1 = alfresco_service_1_1;
+                exportStar_1(alfresco_service_1_1);
+            }],
+        execute: function() {
+            exports_1("default",{
+                directives: [HelloWorld_1.HelloWorld, document_list_component_1.DocumentList],
+                providers: [alfresco_service_1.AlfrescoService]
+            });
+            exports_1("ALFRESCO_DIRECTIVES", ALFRESCO_DIRECTIVES = [HelloWorld_1.HelloWorld, document_list_component_1.DocumentList]);
+            exports_1("ALFRESCO_PROVIDERS", ALFRESCO_PROVIDERS = [alfresco_service_1.AlfrescoService]);
+        }
+    }
+});
+//# sourceMappingURL=component.js.map

ng2-components/ng2-alfresco-documentlist/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":";;;;QAaa,mBAAmB,EACnB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;YAN/B,oBAAe;gBACX,UAAU,EAAE,CAAC,uBAAU,EAAE,sCAAY,CAAC;gBACtC,SAAS,EAAE,CAAC,kCAAe,CAAC;aAC/B,EAAA;YAEY,iCAAA,mBAAmB,GAAU,CAAC,uBAAU,EAAE,sCAAY,CAAC,CAAA,CAAC;YACxD,gCAAA,kBAAkB,GAAU,CAAC,kCAAe,CAAC,CAAA,CAAC"}

ng2-components/ng2-alfresco-documentlist/component.ts

@@ -0,0 +1,15 @@
+import {HelloWorld} from './src/HelloWorld';
+import {DocumentList} from './src/document-list.component';
+import {AlfrescoService} from './src/alfresco.service';
+
+export * from './src/HelloWorld';
+export * from './src/document-list.component';
+export * from './src/alfresco.service';
+
+export default {
+    directives: [HelloWorld, DocumentList],
+    providers: [AlfrescoService]
+}
+
+export const ALFRESCO_DIRECTIVES: [any] = [HelloWorld, DocumentList];
+export const ALFRESCO_PROVIDERS: [any] = [AlfrescoService];

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

@@ -0,0 +1,28 @@
+{
+    "name": "ng2-alfresco-documentlist",
+    "version": "0.1.0",
+    "scripts": {
+        "build": "tsc",
+        "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
+        "tsc": "tsc",
+        "tsc:w": "tsc -w",
+        "lite": "lite-server",
+        "typings": "typings",
+        "postinstall": "typings install"
+    },
+    "license": "ISC",
+    "dependencies": {
+        "angular2": "2.0.0-beta.15",
+        "systemjs": "0.19.26",
+        "es6-shim": "^0.35.0",
+        "reflect-metadata": "0.1.2",
+        "rxjs": "5.0.0-beta.2",
+        "zone.js": "0.6.10"
+    },
+    "devDependencies": {
+        "concurrently": "^2.0.0",
+        "lite-server": "^2.2.0",
+        "typescript": "^1.8.10",
+        "typings":"^0.7.12"
+    }
+}

ng2-components/ng2-alfresco-documentlist/src/HelloWorld.d.ts

@@ -0,0 +1,4 @@
+export declare class HelloWorld {
+    message: string;
+    onClick(): void;
+}

ng2-components/ng2-alfresco-documentlist/src/HelloWorld.js

@@ -0,0 +1,43 @@
+System.register(['angular2/core'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1;
+    var HelloWorld;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            }],
+        execute: function() {
+            HelloWorld = (function () {
+                function HelloWorld() {
+                    this.message = "Click Me ...";
+                }
+                HelloWorld.prototype.onClick = function () {
+                    this.message = "Hello World!";
+                    console.log(this.message);
+                };
+                HelloWorld = __decorate([
+                    core_1.Component({
+                        selector: 'hello-world',
+                        styles: ["\n       h1 {\n            color: blue;\n        }\n    "],
+                        template: "<div>\n                  <h1 (click)=\"onClick()\">{{message}}</h1>\n               </div>"
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], HelloWorld);
+                return HelloWorld;
+            }());
+            exports_1("HelloWorld", HelloWorld);
+        }
+    }
+});
+//# sourceMappingURL=HelloWorld.js.map

ng2-components/ng2-alfresco-documentlist/src/HelloWorld.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelloWorld.js","sourceRoot":"","sources":["HelloWorld.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;YAaA;gBAAA;oBAEI,YAAO,GAAG,cAAc,CAAC;gBAQ7B,CAAC;gBANG,4BAAO,GAAP;oBACI,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;oBAC9B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAE9B,CAAC;gBAnBL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,aAAa;wBACvB,MAAM,EAAE,CAAC,0DAIR,CAAC;wBACF,QAAQ,EAAE,4FAEQ;qBACrB,CAAC;;8BAAA;gBAWF,iBAAC;YAAD,CAAC,AAVD,IAUC;YAVD,mCAUC,CAAA"}

ng2-components/ng2-alfresco-documentlist/src/HelloWorld.ts

@@ -0,0 +1,24 @@
+import {Component} from 'angular2/core';
+
+@Component({
+    selector: 'hello-world',
+    styles: [`
+       h1 {
+            color: blue;
+        }
+    `],
+    template: `<div>
+                  <h1 (click)="onClick()">{{message}}</h1>
+               </div>`
+})
+export class HelloWorld {
+
+    message = "Click Me ...";
+
+    onClick() {
+        this.message = "Hello World!";
+        console.log(this.message);
+
+    }
+
+}

ng2-components/ng2-alfresco-documentlist/src/alfresco.service.d.ts

@@ -0,0 +1,16 @@
+import { Http } from 'angular2/http';
+import { Observable } from 'rxjs/Observable';
+import { FolderEntity } from "./core/entities/folder.entity";
+import { DocumentEntity } from "./core/entities/document.entity";
+export declare class AlfrescoService {
+    private http;
+    constructor(http: Http);
+    private _host;
+    private _baseUrlPath;
+    host: string;
+    private getBaseUrl();
+    getFolder(folder: string): Observable<FolderEntity>;
+    getDocumentThumbnailUrl(document: DocumentEntity): string;
+    getContentUrl(document: DocumentEntity): string;
+    private handleError(error);
+}

ng2-components/ng2-alfresco-documentlist/src/alfresco.service.js

@@ -0,0 +1,80 @@
+System.register(['angular2/core', 'angular2/http', 'rxjs/Observable'], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1, http_1, Observable_1;
+    var AlfrescoService;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (http_1_1) {
+                http_1 = http_1_1;
+            },
+            function (Observable_1_1) {
+                Observable_1 = Observable_1_1;
+            }],
+        execute: function() {
+            AlfrescoService = (function () {
+                function AlfrescoService(http) {
+                    this.http = http;
+                    this._host = 'http://127.0.0.1:8080';
+                    this._baseUrlPath = '/alfresco/service/slingshot/doclib/doclist/all/site/';
+                }
+                Object.defineProperty(AlfrescoService.prototype, "host", {
+                    get: function () {
+                        return this._host;
+                    },
+                    set: function (value) {
+                        this._host = value;
+                    },
+                    enumerable: true,
+                    configurable: true
+                });
+                AlfrescoService.prototype.getBaseUrl = function () {
+                    return this.host + this._baseUrlPath;
+                };
+                AlfrescoService.prototype.getFolder = function (folder) {
+                    var headers = new http_1.Headers({
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Basic ' + btoa('admin:admin')
+                    });
+                    var options = new http_1.RequestOptions({ headers: headers });
+                    return this.http
+                        .get(this.getBaseUrl() + folder, options)
+                        .map(function (res) { return res.json(); })
+                        .do(function (data) { return console.log(data); }) // eyeball results in the console
+                        .catch(this.handleError);
+                };
+                AlfrescoService.prototype.getDocumentThumbnailUrl = function (document) {
+                    return this._host + '/alfresco/service/api/node/' + document.nodeRef.replace('://', '/') + '/content/thumbnails/doclib?c=queue&amp;ph=true&amp;lastModified=1';
+                };
+                AlfrescoService.prototype.getContentUrl = function (document) {
+                    return this._host + '/alfresco/service/' + document.contentUrl;
+                };
+                AlfrescoService.prototype.handleError = function (error) {
+                    // in a real world app, we may send the error to some remote logging infrastructure
+                    // instead of just logging it to the console
+                    console.error(error);
+                    return Observable_1.Observable.throw(error.json().error || 'Server error');
+                };
+                AlfrescoService = __decorate([
+                    core_1.Injectable(), 
+                    __metadata('design:paramtypes', [http_1.Http])
+                ], AlfrescoService);
+                return AlfrescoService;
+            }());
+            exports_1("AlfrescoService", AlfrescoService);
+        }
+    }
+});
+//# sourceMappingURL=alfresco.service.js.map

ng2-components/ng2-alfresco-documentlist/src/alfresco.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alfresco.service.js","sourceRoot":"","sources":["alfresco.service.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;YAOA;gBACI,yBAAoB,IAAU;oBAAV,SAAI,GAAJ,IAAI,CAAM;oBAEtB,UAAK,GAAW,uBAAuB,CAAC;oBACxC,iBAAY,GAAW,sDAAsD,CAAC;gBAHrD,CAAC;gBAKlC,sBAAW,iCAAI;yBAAf;wBACI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;oBACtB,CAAC;yBAED,UAAgB,KAAY;wBACxB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;oBACvB,CAAC;;;mBAJA;gBAMO,oCAAU,GAAlB;oBACI,MAAM,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;gBACzC,CAAC;gBAED,mCAAS,GAAT,UAAU,MAAc;oBACpB,IAAI,OAAO,GAAG,IAAI,cAAO,CAAC;wBACtB,cAAc,EAAE,kBAAkB;wBAClC,eAAe,EAAE,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;qBAClD,CAAC,CAAC;oBACH,IAAI,OAAO,GAAG,IAAI,qBAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;oBACvD,MAAM,CAAC,IAAI,CAAC,IAAI;yBACX,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,EAAE,OAAO,CAAC;yBACxC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAe,GAAG,CAAC,IAAI,EAAE,EAAzB,CAAyB,CAAC;yBACrC,EAAE,CAAC,UAAA,IAAI,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAjB,CAAiB,CAAC,CAAC,iCAAiC;yBAC/D,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACjC,CAAC;gBAED,iDAAuB,GAAvB,UAAwB,QAAwB;oBAC5C,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,6BAA6B,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,mEAAmE,CAAC;gBACnK,CAAC;gBAED,uCAAa,GAAb,UAAc,QAAwB;oBAClC,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,oBAAoB,GAAG,QAAQ,CAAC,UAAU,CAAC;gBACnE,CAAC;gBAEO,qCAAW,GAAnB,UAAqB,KAAe;oBAChC,mFAAmF;oBACnF,4CAA4C;oBAC5C,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBACrB,MAAM,CAAC,uBAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC;gBAClE,CAAC;gBA7CL;oBAAC,iBAAU,EAAE;;mCAAA;gBA8Cb,sBAAC;YAAD,CAAC,AA7CD,IA6CC;YA7CD,6CA6CC,CAAA"}

ng2-components/ng2-alfresco-documentlist/src/alfresco.service.ts

@@ -0,0 +1,53 @@
+import {Injectable} from 'angular2/core';
+import {Http, Response, RequestOptions, Headers} from 'angular2/http';
+import {Observable} from 'rxjs/Observable';
+import {FolderEntity} from "./core/entities/folder.entity";
+import {DocumentEntity} from "./core/entities/document.entity";
+
+@Injectable()
+export class AlfrescoService {
+    constructor(private http: Http) {}
+
+    private _host: string = 'http://127.0.0.1:8080';
+    private _baseUrlPath: string = '/alfresco/service/slingshot/doclib/doclist/all/site/';
+
+    public get host():string {
+        return this._host;
+    }
+
+    public set host(value:string) {
+        this._host = value;
+    }
+
+    private getBaseUrl():string {
+        return this.host + this._baseUrlPath;
+    }
+
+    getFolder(folder: string) {
+        let headers = new Headers({
+            'Content-Type': 'application/json',
+            'Authorization': 'Basic ' + btoa('admin:admin')
+        });
+        let options = new RequestOptions({ headers: headers });
+        return this.http
+            .get(this.getBaseUrl() + folder, options)
+            .map(res => <FolderEntity> res.json())
+            .do(data => console.log(data)) // eyeball results in the console
+            .catch(this.handleError);
+    }
+
+    getDocumentThumbnailUrl(document: DocumentEntity) {
+        return this._host + '/alfresco/service/api/node/' + document.nodeRef.replace('://', '/') + '/content/thumbnails/doclib?c=queue&amp;ph=true&amp;lastModified=1';
+    }
+
+    getContentUrl(document: DocumentEntity) {
+        return this._host + '/alfresco/service/' + document.contentUrl;
+    }
+
+    private handleError (error: Response) {
+        // in a real world app, we may send the error to some remote logging infrastructure
+        // instead of just logging it to the console
+        console.error(error);
+        return Observable.throw(error.json().error || 'Server error');
+    }
+}

ng2-components/ng2-alfresco-documentlist/src/core/entities/document.entity.d.ts

@@ -0,0 +1,31 @@
+import { LocationEntity } from "./location.entity";
+export declare class DocumentEntity {
+    nodeRef: string;
+    nodeType: string;
+    type: string;
+    mimetype: string;
+    isFolder: boolean;
+    isLink: boolean;
+    fileName: string;
+    displayName: string;
+    status: string;
+    title: string;
+    description: string;
+    author: string;
+    createdOn: string;
+    createdBy: string;
+    createdByUser: string;
+    modifiedOn: string;
+    modifiedBy: string;
+    modifiedByUser: string;
+    lockedBy: string;
+    lockedByUser: string;
+    size: number;
+    version: string;
+    contentUrl: string;
+    webdavUrl: string;
+    actionSet: string;
+    tags: string[];
+    activeWorkflows: string;
+    location: LocationEntity;
+}

ng2-components/ng2-alfresco-documentlist/src/core/entities/document.entity.js

@@ -0,0 +1,17 @@
+System.register([], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var DocumentEntity;
+    return {
+        setters:[],
+        execute: function() {
+            DocumentEntity = (function () {
+                function DocumentEntity() {
+                }
+                return DocumentEntity;
+            }());
+            exports_1("DocumentEntity", DocumentEntity);
+        }
+    }
+});
+//# sourceMappingURL=document.entity.js.map

ng2-components/ng2-alfresco-documentlist/src/core/entities/document.entity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.entity.js","sourceRoot":"","sources":["document.entity.ts"],"names":[],"mappings":";;;;;;;YAGA;gBAAA;gBA6BA,CAAC;gBAAD,qBAAC;YAAD,CAAC,AA7BD,IA6BC;YA7BD,2CA6BC,CAAA"}

ng2-components/ng2-alfresco-documentlist/src/core/entities/document.entity.ts

@@ -0,0 +1,33 @@
+// contains only limited subset of available fields
+import {LocationEntity} from "./location.entity";
+
+export class DocumentEntity {
+    nodeRef: string;
+    nodeType: string;
+    type: string;
+    mimetype: string;
+    isFolder: boolean;
+    isLink: boolean;
+    fileName: string;
+    displayName: string;
+    status: string;
+    title: string;
+    description: string;
+    author: string;
+    createdOn: string;
+    createdBy: string;
+    createdByUser: string;
+    modifiedOn: string;
+    modifiedBy: string;
+    modifiedByUser: string;
+    lockedBy: string;
+    lockedByUser: string;
+    size: number;
+    version: string;
+    contentUrl: string;
+    webdavUrl: string;
+    actionSet: string;
+    tags: string[];
+    activeWorkflows: string;
+    location: LocationEntity;
+}

ng2-components/ng2-alfresco-documentlist/src/core/entities/folder.entity.d.ts

@@ -0,0 +1,4 @@
+import { DocumentEntity } from "./document.entity";
+export declare class FolderEntity {
+    items: DocumentEntity[];
+}

ng2-components/ng2-alfresco-documentlist/src/core/entities/folder.entity.js

@@ -0,0 +1,18 @@
+System.register([], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var FolderEntity;
+    return {
+        setters:[],
+        execute: function() {
+            // contains only limited subset of available fields
+            FolderEntity = (function () {
+                function FolderEntity() {
+                }
+                return FolderEntity;
+            }());
+            exports_1("FolderEntity", FolderEntity);
+        }
+    }
+});
+//# sourceMappingURL=folder.entity.js.map

ng2-components/ng2-alfresco-documentlist/src/core/entities/folder.entity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folder.entity.js","sourceRoot":"","sources":["folder.entity.ts"],"names":[],"mappings":";;;;;;;YAEA,mDAAmD;YACnD;gBAAA;gBAEA,CAAC;gBAAD,mBAAC;YAAD,CAAC,AAFD,IAEC;YAFD,uCAEC,CAAA"}

ng2-components/ng2-alfresco-documentlist/src/core/entities/folder.entity.ts

@@ -0,0 +1,6 @@
+import {DocumentEntity} from "./document.entity";
+
+// contains only limited subset of available fields
+export class FolderEntity {
+    items: DocumentEntity[];
+}

ng2-components/ng2-alfresco-documentlist/src/core/entities/location.entity.d.ts

@@ -0,0 +1,12 @@
+export declare class LocationEntity {
+    repositoryId: string;
+    site: string;
+    siteTitle: string;
+    container: string;
+    path: string;
+    file: string;
+    parent: LocationParentEntity;
+}
+export declare class LocationParentEntity {
+    nodeRef: string;
+}

ng2-components/ng2-alfresco-documentlist/src/core/entities/location.entity.js

@@ -0,0 +1,24 @@
+System.register([], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var LocationEntity, LocationParentEntity;
+    return {
+        setters:[],
+        execute: function() {
+            // contains only limited subset of available fields
+            LocationEntity = (function () {
+                function LocationEntity() {
+                }
+                return LocationEntity;
+            }());
+            exports_1("LocationEntity", LocationEntity);
+            LocationParentEntity = (function () {
+                function LocationParentEntity() {
+                }
+                return LocationParentEntity;
+            }());
+            exports_1("LocationParentEntity", LocationParentEntity);
+        }
+    }
+});
+//# sourceMappingURL=location.entity.js.map

ng2-components/ng2-alfresco-documentlist/src/core/entities/location.entity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"location.entity.js","sourceRoot":"","sources":["location.entity.ts"],"names":[],"mappings":";;;;;;;YAAA,mDAAmD;YACnD;gBAAA;gBAQA,CAAC;gBAAD,qBAAC;YAAD,CAAC,AARD,IAQC;YARD,2CAQC,CAAA;YAED;gBAAA;gBAEA,CAAC;gBAAD,2BAAC;YAAD,CAAC,AAFD,IAEC;YAFD,uDAEC,CAAA"}

ng2-components/ng2-alfresco-documentlist/src/core/entities/location.entity.ts

@@ -0,0 +1,14 @@
+// contains only limited subset of available fields
+export class LocationEntity {
+    repositoryId: string;
+    site: string;
+    siteTitle: string;
+    container: string;
+    path: string;
+    file: string;
+    parent: LocationParentEntity;
+}
+
+export class LocationParentEntity {
+    nodeRef: string;
+}

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

@@ -0,0 +1,32 @@
+import { OnInit, EventEmitter } from "angular2/core";
+import { AlfrescoService } from "./alfresco.service";
+import { FolderEntity } from "./core/entities/folder.entity";
+import { DocumentEntity } from "./core/entities/document.entity";
+export declare class DocumentList implements OnInit {
+    private _alfrescoService;
+    navigate: boolean;
+    breadcrumb: boolean;
+    folderIconClass: string;
+    thumbnails: boolean;
+    downloads: boolean;
+    itemClick: EventEmitter<any>;
+    rootFolder: {
+        name: string;
+        path: string;
+    };
+    currentFolderPath: string;
+    folder: FolderEntity;
+    errorMessage: any;
+    route: any[];
+    canNavigateParent(): boolean;
+    constructor(_alfrescoService: AlfrescoService);
+    ngOnInit(): void;
+    private displayFolderContent(path);
+    onNavigateParentClick($event: any): void;
+    onDownloadClick(event: any): void;
+    onItemClick(item: DocumentEntity, $event: any): void;
+    goToRoute(r: any, $event: any): void;
+    private getItemPath(item);
+    getContentUrl(document: DocumentEntity): string;
+    getDocumentThumbnailUrl(document: DocumentEntity): string;
+}

ng2-components/ng2-alfresco-documentlist/src/document-list.component.js

@@ -0,0 +1,159 @@
+System.register(["angular2/core", "./alfresco.service"], function(exports_1, context_1) {
+    "use strict";
+    var __moduleName = context_1 && context_1.id;
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1, alfresco_service_1;
+    var DocumentList;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (alfresco_service_1_1) {
+                alfresco_service_1 = alfresco_service_1_1;
+            }],
+        execute: function() {
+            DocumentList = (function () {
+                function DocumentList(_alfrescoService) {
+                    this._alfrescoService = _alfrescoService;
+                    // example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
+                    this.navigate = true;
+                    // example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
+                    this.breadcrumb = false;
+                    // example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
+                    this.folderIconClass = 'fa fa-folder-o fa-4x';
+                    // example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
+                    this.thumbnails = true;
+                    // example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
+                    this.downloads = true;
+                    this.itemClick = new core_1.EventEmitter();
+                    this.rootFolder = {
+                        name: 'Document Library',
+                        path: 'swsdp/documentLibrary'
+                    };
+                    this.currentFolderPath = 'swsdp/documentLibrary';
+                    this.route = [];
+                }
+                DocumentList.prototype.canNavigateParent = function () {
+                    return this.navigate &&
+                        !this.breadcrumb &&
+                        this.currentFolderPath !== this.rootFolder.path;
+                };
+                DocumentList.prototype.ngOnInit = function () {
+                    this.route.push(this.rootFolder);
+                    this.displayFolderContent(this.rootFolder.path);
+                };
+                DocumentList.prototype.displayFolderContent = function (path) {
+                    var _this = this;
+                    this.currentFolderPath = path;
+                    this._alfrescoService
+                        .getFolder(path)
+                        .subscribe(function (folder) { return _this.folder = folder; }, function (error) { return _this.errorMessage = error; });
+                };
+                DocumentList.prototype.onNavigateParentClick = function ($event) {
+                    if ($event) {
+                        $event.preventDefault();
+                    }
+                    if (this.navigate) {
+                        this.route.pop();
+                        var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
+                        if (parent) {
+                            this.displayFolderContent(parent.path);
+                        }
+                    }
+                };
+                DocumentList.prototype.onDownloadClick = function (event) {
+                    event.stopPropagation();
+                };
+                DocumentList.prototype.onItemClick = function (item, $event) {
+                    if ($event) {
+                        $event.preventDefault();
+                    }
+                    this.itemClick.emit({
+                        value: item
+                    });
+                    if (this.navigate && item) {
+                        if (item.isFolder) {
+                            var path = this.getItemPath(item);
+                            this.route.push({
+                                name: item.displayName,
+                                path: path
+                            });
+                            this.displayFolderContent(path);
+                        }
+                    }
+                };
+                DocumentList.prototype.goToRoute = function (r, $event) {
+                    if ($event) {
+                        $event.preventDefault();
+                    }
+                    if (this.navigate) {
+                        var idx = this.route.indexOf(r);
+                        if (idx > -1) {
+                            this.route.splice(idx + 1);
+                            this.displayFolderContent(r.path);
+                        }
+                    }
+                };
+                DocumentList.prototype.getItemPath = function (item) {
+                    var container = item.location.container;
+                    var path = item.location.path !== '/' ? (item.location.path + '/') : '/';
+                    var relativePath = container + path + item.fileName;
+                    return item.location.site + '/' + relativePath;
+                };
+                DocumentList.prototype.getContentUrl = function (document) {
+                    return this._alfrescoService.getContentUrl(document);
+                };
+                DocumentList.prototype.getDocumentThumbnailUrl = function (document) {
+                    return this._alfrescoService.getDocumentThumbnailUrl(document);
+                };
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Boolean)
+                ], DocumentList.prototype, "navigate", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Boolean)
+                ], DocumentList.prototype, "breadcrumb", void 0);
+                __decorate([
+                    core_1.Input('folder-icon-class'), 
+                    __metadata('design:type', String)
+                ], DocumentList.prototype, "folderIconClass", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Boolean)
+                ], DocumentList.prototype, "thumbnails", void 0);
+                __decorate([
+                    core_1.Input(), 
+                    __metadata('design:type', Boolean)
+                ], DocumentList.prototype, "downloads", void 0);
+                __decorate([
+                    core_1.Output(), 
+                    __metadata('design:type', core_1.EventEmitter)
+                ], DocumentList.prototype, "itemClick", void 0);
+                DocumentList = __decorate([
+                    core_1.Component({
+                        selector: 'alfresco-document-list',
+                        styles: [
+                            "\n            :host .breadcrumb {\n                margin-bottom: 4px;\n            }\n\n            :host .folder-icon {\n                float: left;\n                margin-right: 10px;\n            }\n\n            :host .file-icon {\n                width: 52px;\n                height: 52px;\n                float: left;\n                margin-right: 10px;\n            }\n\n            :host .document-header:hover {\n                text-decoration: underline;\n            }\n\n            :host .download-button {\n                color: #777;\n                text-decoration: none;\n            }\n\n            :host .download-button:hover {\n                color: #555;\n            }\n        "
+                        ],
+                        template: "\n        <ol *ngIf=\"breadcrumb\" class=\"breadcrumb\">\n            <li *ngFor=\"#r of route; #last = last\" [class.active]=\"last\" [ngSwitch]=\"last\">\n                <span *ngSwitchWhen=\"true\">{{r.name}}</span>\n                <a *ngSwitchDefault href=\"#\" (click)=\"goToRoute(r, $event)\">{{r.name}}</a>\n            </li>\n        </ol>\n        <div *ngIf=\"folder\" class=\"list-group\">\n            <a href=\"#\" *ngIf=\"canNavigateParent()\" (click)=\"onNavigateParentClick($event)\" class=\"list-group-item\">\n                <i class=\"fa fa-level-up\"></i> ...\n            </a>\n            <a href=\"#\" *ngFor=\"#document of folder.items\" (click)=\"onItemClick(document, $event)\" class=\"list-group-item clearfix\">\n                <a *ngIf=\"downloads && !document.isFolder\" href=\"{{getContentUrl(document)}}\" (click)=\"onDownloadClick($event)\" class=\"download-button pull-right\" download target=\"_blank\">\n                    <i class=\"fa fa-download fa-2x\"></i>\n                </a>\n                <i *ngIf=\"thumbnails && document.isFolder\" class=\"folder-icon {{folderIconClass}}\"></i>\n                <img *ngIf=\"thumbnails && !document.isFolder\" class=\"file-icon\" src=\"{{getDocumentThumbnailUrl(document)}}\">\n                <h4 class=\"list-group-item-heading document-header\">\n                    {{document.displayName}}\n                </h4>\n                <p class=\"list-group-item-text\">{{document.description}}</p>\n                <small>\n                    Modified {{document.modifiedOn}} by {{document.modifiedBy}}\n                </small>\n            </a>\n        </div>\n    " /*,
+                        providers: [AlfrescoService]*/
+                    }), 
+                    __metadata('design:paramtypes', [alfresco_service_1.AlfrescoService])
+                ], DocumentList);
+                return DocumentList;
+            }());
+            exports_1("DocumentList", DocumentList);
+        }
+    }
+});
+//# sourceMappingURL=document-list.component.js.map

ng2-components/ng2-alfresco-documentlist/src/document-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-list.component.js","sourceRoot":"","sources":["document-list.component.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,186 @@
+import {Component, OnInit, Input, Output, EventEmitter} from "angular2/core";
+import {AlfrescoService} from "./alfresco.service";
+import {FolderEntity} from "./core/entities/folder.entity";
+import {DocumentEntity} from "./core/entities/document.entity";
+
+@Component({
+    selector: 'alfresco-document-list',
+    styles: [
+        `
+            :host .breadcrumb {
+                margin-bottom: 4px;
+            }
+
+            :host .folder-icon {
+                float: left;
+                margin-right: 10px;
+            }
+
+            :host .file-icon {
+                width: 52px;
+                height: 52px;
+                float: left;
+                margin-right: 10px;
+            }
+
+            :host .document-header:hover {
+                text-decoration: underline;
+            }
+
+            :host .download-button {
+                color: #777;
+                text-decoration: none;
+            }
+
+            :host .download-button:hover {
+                color: #555;
+            }
+        `
+    ],
+    template: `
+        <ol *ngIf="breadcrumb" class="breadcrumb">
+            <li *ngFor="#r of route; #last = last" [class.active]="last" [ngSwitch]="last">
+                <span *ngSwitchWhen="true">{{r.name}}</span>
+                <a *ngSwitchDefault href="#" (click)="goToRoute(r, $event)">{{r.name}}</a>
+            </li>
+        </ol>
+        <div *ngIf="folder" class="list-group">
+            <a href="#" *ngIf="canNavigateParent()" (click)="onNavigateParentClick($event)" class="list-group-item">
+                <i class="fa fa-level-up"></i> ...
+            </a>
+            <a href="#" *ngFor="#document of folder.items" (click)="onItemClick(document, $event)" class="list-group-item clearfix">
+                <a *ngIf="downloads && !document.isFolder" href="{{getContentUrl(document)}}" (click)="onDownloadClick($event)" class="download-button pull-right" download target="_blank">
+                    <i class="fa fa-download fa-2x"></i>
+                </a>
+                <i *ngIf="thumbnails && document.isFolder" class="folder-icon {{folderIconClass}}"></i>
+                <img *ngIf="thumbnails && !document.isFolder" class="file-icon" src="{{getDocumentThumbnailUrl(document)}}">
+                <h4 class="list-group-item-heading document-header">
+                    {{document.displayName}}
+                </h4>
+                <p class="list-group-item-text">{{document.description}}</p>
+                <small>
+                    Modified {{document.modifiedOn}} by {{document.modifiedBy}}
+                </small>
+            </a>
+        </div>
+    `/*,
+    providers: [AlfrescoService]*/
+})
+export class DocumentList implements OnInit {
+
+    // example: <alfresco-document-list [navigate]="false"></alfresco-document-list>
+    @Input() navigate: boolean = true;
+    // example: <alfresco-document-list [breadcrumb]="true"></alfresco-document-list>
+    @Input() breadcrumb: boolean = false;
+    // example: <alfresco-document-list folder-icon-class="fa fa-folder fa-4x"></alfresco-document-list>
+    @Input('folder-icon-class') folderIconClass: string = 'fa fa-folder-o fa-4x';
+    // example: <alfresco-document-list #list [thumbnails]="false"></alfresco-document-list>
+    @Input() thumbnails: boolean = true;
+    // example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
+    @Input() downloads: boolean = true;
+
+    @Output() itemClick: EventEmitter<any> = new EventEmitter();
+
+    rootFolder = {
+        name: 'Document Library',
+        path: 'swsdp/documentLibrary'
+    };
+    currentFolderPath: string = 'swsdp/documentLibrary';
+    folder: FolderEntity;
+    errorMessage;
+
+    route: any[] = [];
+
+    canNavigateParent(): boolean {
+        return this.navigate &&
+            !this.breadcrumb &&
+            this.currentFolderPath !== this.rootFolder.path;
+    }
+
+    constructor (
+        private _alfrescoService: AlfrescoService
+    ) {}
+
+    ngOnInit() {
+        this.route.push(this.rootFolder);
+        this.displayFolderContent(this.rootFolder.path);
+    }
+
+    private displayFolderContent(path) {
+        this.currentFolderPath = path;
+        this._alfrescoService
+            .getFolder(path)
+            .subscribe(
+                folder => this.folder = folder,
+                error => this.errorMessage = <any>error
+            );
+    }
+
+    onNavigateParentClick($event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+
+        if (this.navigate) {
+            this.route.pop();
+            var parent = this.route.length > 0 ? this.route[this.route.length - 1] : this.rootFolder;
+            if (parent) {
+                this.displayFolderContent(parent.path);
+            }
+        }
+    }
+
+    onDownloadClick(event) {
+        event.stopPropagation();
+    }
+
+    onItemClick(item: DocumentEntity, $event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+
+        this.itemClick.emit({
+            value: item
+        });
+
+        if (this.navigate && item) {
+            if (item.isFolder) {
+                var path = this.getItemPath(item);
+                this.route.push({
+                    name: item.displayName,
+                    path: path
+                });
+                this.displayFolderContent(path);
+            }
+        }
+    }
+
+    goToRoute(r, $event) {
+        if ($event) {
+            $event.preventDefault();
+        }
+
+        if (this.navigate) {
+            var idx = this.route.indexOf(r);
+            if (idx > -1) {
+                this.route.splice(idx + 1);
+                this.displayFolderContent(r.path);
+            }
+        }
+    }
+
+    private getItemPath(item: DocumentEntity):string {
+        var container = item.location.container;
+        var path = item.location.path !== '/' ? (item.location.path + '/' ) : '/';
+        var relativePath = container + path + item.fileName;
+        return item.location.site + '/' + relativePath;
+    }
+
+    getContentUrl(document: DocumentEntity) {
+        return this._alfrescoService.getContentUrl(document);
+    }
+
+    getDocumentThumbnailUrl(document:  DocumentEntity) {
+        return this._alfrescoService.getDocumentThumbnailUrl(document);
+    }
+}

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

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "system",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "removeComments": false,
+        "noImplicitAny": false,
+        "declaration": true
+    },
+    "exclude": [
+        "node_modules",
+        "typings/main",
+        "typings/main.d.ts"
+    ]
+}

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

@@ -0,0 +1,6 @@
+{
+    "ambientDependencies": {
+        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
+        "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
+    }
+}