externalize system config js in demo and fix some tslin error

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 workspace.xml
 .idea/
-dist/
+dist/
+!systemjs.config.js

ng2-components/ng2-alfresco-core/.gitignore

@@ -13,3 +13,4 @@ demo/**/*.js.map
 demo/**/*.d.ts
 ng2-alfresco-core.js
 ng2-alfresco-core.js.map
+!systemjs.config.js

ng2-components/ng2-alfresco-datatable/.gitignore

@@ -8,3 +8,4 @@ src/**/*.js
 src/**/*.js.map
 ng2-alfresco-datatable.js
 ng2-alfresco-datatable.js.map
+!systemjs.config.js

ng2-components/ng2-alfresco-datatable/demo/.gitignore

@@ -2,4 +2,5 @@ node_modules
 .idea
 coverage
 dist
-typings
+typings
+!systemjs.config.js

ng2-components/ng2-alfresco-datatable/demo/index.html

@@ -22,28 +22,9 @@
     <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script src="node_modules/angular2/bundles/http.dev.js"></script>
 
+    <script src="systemjs.config.js"></script>
     <script>
-        System.config({
+        System.import('app').catch(function(err){ console.error(err); });
-            defaultJSExtensions: true,
-            map: {
-                'ng2-translate': 'node_modules/ng2-translate',
-                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable',
-                'rxjs': 'node_modules/rxjs',
-                'angular2' : 'node_modules/angular2',
-                'app': 'dist'
-            },
-            packages: {
-                'app': { format: 'register', defaultExtension: 'js' },
-                'ng2-translate': { defaultExtension: 'js' },
-                'ng2-alfresco-core': { defaultExtension: 'js' },
-                'ng2-alfresco-datatable': { defaultExtension: 'js' },
-                'rxjs': { defaultExtension: 'js' },
-                'angular2': { defaultExtension: 'js' }
-            }
-        });
-
-        System.import('app/main').catch(console.log.bind(console));
     </script>
 
 </head>

ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js

@@ -0,0 +1,48 @@
+/**
+ * @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.
+ */
+
+(function (global) {
+
+    // map tells the System loader where to look for things
+    var map = {
+        'ng2-translate': 'node_modules/ng2-translate',
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+        'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable',
+        'rxjs': 'node_modules/rxjs',
+        'angular2' : 'node_modules/angular2',
+        'app': 'dist/main'
+    };
+
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'app': { format: 'register', defaultExtension: 'js' },
+        'ng2-translate': { defaultExtension: 'js' },
+        'ng2-alfresco-core': { defaultExtension: 'js' },
+        'ng2-alfresco-datatable': { defaultExtension: 'js' },
+        'rxjs': { defaultExtension: 'js' },
+        'angular2': { defaultExtension: 'js' }
+    };
+
+    var config = {
+        defaultJSExtensions: true,
+        map: map,
+        packages: packages
+    };
+
+    System.config(config);
+
+})(this);

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

@@ -58,7 +58,8 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
 
     isSelectAllChecked: boolean = false;
 
-    constructor(/*private _ngZone?: NgZone*/) {}
+    constructor(/*private _ngZone?: NgZone*/) {
+    }
 
     ngOnInit() {
         if (this.data) {

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

@@ -13,3 +13,4 @@ demo/**/*.js.map
 demo/**/*.d.ts
 ng2-alfresco-documentlist.js
 ng2-alfresco-documentlist.js.map
+!systemjs.config.js

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

@@ -2,4 +2,5 @@ node_modules
 .idea
 coverage
 dist
-typings
+typings
+!systemjs.config.js

ng2-components/ng2-alfresco-documentlist/demo/index.html

@@ -25,28 +25,9 @@
     <!-- Additional Alfresco libraries -->
     <script src="node_modules/alfresco-core-rest-api/bundle.js"></script>
 
+    <script src="systemjs.config.js"></script>
     <script>
-        System.config({
+        System.import('app').catch(function(err){ console.error(err); });
-            defaultJSExtensions: true,
-            map: {
-                'ng2-translate': 'node_modules/ng2-translate',
-                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
-                'rxjs': 'node_modules/rxjs',
-                'angular2' : 'node_modules/angular2',
-                'app': 'dist'
-            },
-            packages: {
-                'app': { format: 'register', defaultExtension: 'js' },
-                'ng2-translate': { defaultExtension: 'js' },
-                'ng2-alfresco-core': { defaultExtension: 'js' },
-                'ng2-alfresco-documentlist': { defaultExtension: 'js' },
-                'rxjs': { defaultExtension: 'js' },
-                'angular2': { defaultExtension: 'js' }
-            }
-        });
-
-        System.import('app/main').catch(console.log.bind(console));
     </script>
 
 </head>

ng2-components/ng2-alfresco-documentlist/demo/src/main.ts

@@ -74,7 +74,7 @@ import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-
                             title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
                             (execute)="myFolderAction1($event)">
                     </content-action>
-        
+
                     <!-- document actions -->
                     <content-action
                             target="document"
@@ -146,14 +146,9 @@ class DocumentListDemo implements OnInit {
         alert('Custom folder action for ' + event.value.displayName);
     }
 
-    private handleError(error: Response) {
-        console.error('Error when logging in', error);
-        return Observable.throw(error.json().message || 'Server error');
-    }
-
     login() {
         let host = 'http://192.168.99.100:8080';
-        let credentials = { "userId": "admin", "password": "admin" };
+        let credentials = { 'userId': 'admin', 'password': 'admin' };
         let url = `${host}/alfresco/api/-default-/public/authentication/versions/1/tickets`;
 
         let headers = new Headers();
@@ -168,6 +163,11 @@ class DocumentListDemo implements OnInit {
                 this.authenticated = true;
             });
     }
+
+    private handleError(error: Response) {
+        console.error('Error when logging in', error);
+        return Observable.throw(error.json().message || 'Server error');
+    }
 }
 
 bootstrap(DocumentListDemo, [

ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js

@@ -0,0 +1,48 @@
+/**
+ * @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.
+ */
+
+(function (global) {
+
+    // map tells the System loader where to look for things
+    var map = {
+        'ng2-translate': 'node_modules/ng2-translate',
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+        'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
+        'rxjs': 'node_modules/rxjs',
+        'angular2' : 'node_modules/angular2',
+        'app': 'dist/main'
+    };
+
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'app': { format: 'register', defaultExtension: 'js' },
+        'ng2-translate': { defaultExtension: 'js' },
+        'ng2-alfresco-core': { defaultExtension: 'js' },
+        'ng2-alfresco-documentlist': { defaultExtension: 'js' },
+        'rxjs': { defaultExtension: 'js' },
+        'angular2': { defaultExtension: 'js' }
+    };
+
+    var config = {
+        defaultJSExtensions: true,
+        map: map,
+        packages: packages
+    };
+
+    System.config(config);
+
+})(this);

ng2-components/ng2-alfresco-login/.gitignore

@@ -13,3 +13,4 @@ demo/**/*.js.map
 demo/**/*.d.ts
 ng2-alfresco-login.js
 ng2-alfresco-login.js.map
+!systemjs.config.js

ng2-components/ng2-alfresco-login/demo/.gitignore

@@ -2,4 +2,5 @@ node_modules
 .idea
 coverage
 dist
-typings
+typings
+!systemjs.config.js

ng2-components/ng2-alfresco-login/demo/index.html

@@ -23,37 +23,9 @@
     <script src="node_modules/angular2/bundles/http.dev.js"></script>
     <script src="node_modules/alfresco-core-rest-api/bundle.js"></script>
 
+    <script src="systemjs.config.js"></script>
     <script>
-        System.config({
+        System.import('app').catch(function(err){ console.error(err); });
-            defaultJSExtensions: true,
-            map: {
-                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
-                'rxjs': 'node_modules/rxjs',
-                'angular2' : 'node_modules/angular2',
-                'ng2-translate': 'node_modules/ng2-translate',
-                'src': 'src'
-            },
-            packages: {
-                'src': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-core': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-login': {
-                    defaultExtension: 'js'
-                },
-                'rxjs': {
-                    defaultExtension: 'js'
-                },
-                'angular2': {
-                    defaultExtension: 'js'
-                }
-            }
-        });
-
-        System.import('dist/main').catch(console.log.bind(console));
     </script>
 
 </head>

ng2-components/ng2-alfresco-login/demo/package.json

@@ -44,7 +44,7 @@
     "browser-sync": "^2.10.0",
     "concurrently": "^2.0.0",
     "lite-server": "^2.2.0",
-    "tslint": "^3.8.1",
+      "tslint": "^3.8.1",
     "typescript": "^1.8.10",
     "typings": "^0.7.12"
   },

ng2-components/ng2-alfresco-login/demo/systemjs.config.js

@@ -0,0 +1,57 @@
+/**
+ * @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.
+ */
+
+(function (global) {
+
+    // map tells the System loader where to look for things
+    var map = {
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+        'ng2-alfresco-login': 'node_modules/ng2-alfresco-login',
+        'rxjs': 'node_modules/rxjs',
+        'angular2' : 'node_modules/angular2',
+        'ng2-translate': 'node_modules/ng2-translate',
+        'app': 'dist/main'
+    };
+
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'src': {
+            defaultExtension: 'js'
+        },
+        'ng2-alfresco-core': {
+            defaultExtension: 'js'
+        },
+        'ng2-alfresco-login': {
+            defaultExtension: 'js'
+        },
+        'rxjs': {
+            defaultExtension: 'js'
+        },
+        'angular2': {
+            defaultExtension: 'js'
+        }
+    };
+
+    var config = {
+        defaultJSExtensions: true,
+        map: map,
+        packages: packages
+    };
+
+    System.config(config);
+
+})(this);

ng2-components/ng2-alfresco-search/.gitignore

@@ -8,3 +8,4 @@ src/**/*.js
 src/**/*.js.map
 ng2-alfresco-datatable.js
 ng2-alfresco-datatable.js.map
+!systemjs.config.js

ng2-components/ng2-alfresco-upload/.gitignore

@@ -13,3 +13,4 @@ demo/**/*.js.map
 demo/**/*.d.ts
 ng2-alfresco-upload.js
 ng2-alfresco-upload.js.map
+!systemjs.config.js

ng2-components/ng2-alfresco-upload/demo/.gitignore

@@ -1,4 +1,5 @@
 typings/
 node_modules/
 .idea
-dist/
+dist/\
+!systemjs.config.js

ng2-components/ng2-alfresco-upload/demo/index.html

@@ -23,36 +23,9 @@
     <script src="node_modules/angular2/bundles/http.dev.js"></script>
     <script src="node_modules/alfresco-core-rest-api/bundle.js"></script>
 
+    <script src="systemjs.config.js"></script>
     <script>
-        System.config({
+        System.import('app').catch(function(err){ console.error(err); });
-            defaultJSExtensions: true,
-            map: {
-                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
-                'rxjs': 'node_modules/rxjs',
-                'angular2': 'node_modules/angular2',
-                'ng2-translate': 'node_modules/ng2-translate',
-                'src': 'src'
-            },
-            packages: {
-                'src': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-core': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-upload': {
-                    defaultExtension: 'js'
-                },
-                'rxjs': {
-                    defaultExtension: 'js'
-                },
-                'angular2': {
-                    defaultExtension: 'js'
-                }
-            }
-        });
-        System.import('dist/main').catch(console.log.bind(console));
     </script>
 
 </head>

ng2-components/ng2-alfresco-upload/demo/src/main.ts

@@ -62,10 +62,11 @@ import { ALFRESCO_ULPOAD_COMPONENTS, UploadService } from 'ng2-alfresco-upload/d
 })
 export class MyDemoApp {
     token: string;
+
     constructor(alfrescoSettingsService: AlfrescoSettingsService) {
         alfrescoSettingsService.host = 'http://192.168.99.100:8080';
 
-        if(localStorage.getItem('token')) {
+        if (localStorage.getItem('token')) {
             this.token = localStorage.getItem('token');
         }
     }

ng2-components/ng2-alfresco-upload/demo/systemjs.config.js

@@ -0,0 +1,57 @@
+/**
+ * @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.
+ */
+
+(function (global) {
+
+    // map tells the System loader where to look for things
+    var map = {
+        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+        'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
+        'rxjs': 'node_modules/rxjs',
+        'angular2': 'node_modules/angular2',
+        'ng2-translate': 'node_modules/ng2-translate',
+        'app': 'dist/main'
+    };
+
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'src': {
+            defaultExtension: 'js'
+        },
+        'ng2-alfresco-core': {
+            defaultExtension: 'js'
+        },
+        'ng2-alfresco-upload': {
+            defaultExtension: 'js'
+        },
+        'rxjs': {
+            defaultExtension: 'js'
+        },
+        'angular2': {
+            defaultExtension: 'js'
+        }
+    };
+
+    var config = {
+        defaultJSExtensions: true,
+        map: map,
+        packages: packages
+    };
+
+    System.config(config);
+
+})(this);

ng2-components/ng2-alfresco-viewer/.gitignore

@@ -11,3 +11,4 @@ src/**/*.d.ts
 demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
+!systemjs.config.js

ng2-components/ng2-alfresco-viewer/demo/.gitignore

@@ -2,4 +2,5 @@ node_modules
 .idea
 coverage
 dist
-typings
+typings
+!systemjs.config.js

ng2-components/ng2-alfresco-viewer/demo/index.html

@@ -26,31 +26,9 @@
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
     <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
 
+    <script src="systemjs.config.js"></script>
     <script>
-        System.config({
+        System.import('app').catch(function(err){ console.error(err); });
-            defaultJSExtensions: true,
-            map: {
-                'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer',
-                'rxjs': 'node_modules/rxjs',
-                'angular2': 'node_modules/angular2',
-                'app': 'dist/main'
-            },
-            packages: {
-                'src': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-viewer': {
-                    defaultExtension: 'js'
-                },
-                'rxjs': {
-                    defaultExtension: 'js'
-                },
-                'angular2': {
-                    defaultExtension: 'js'
-                }
-            }
-        });
-        System.import('app').catch(console.log.bind(console));
     </script>
 
 </head>

ng2-components/ng2-alfresco-viewer/demo/package.json

@@ -5,9 +5,10 @@
     "author": "Alfresco Software, Ltd.",
     "main": "index.js",
     "scripts": {
-        "postinstall": "npm run typings && npm run build  && npm link ng2-alfresco-viewer",
+        "postinstall": "npm run typings && npm run build",
         "typings": "typings install",
-        "start": "rm -rf dist && npm install && http-server -c-1 -o -p 8875 .",
+        "start": "rm -rf dist && npm install && npm run server",
+        "server": "lite-server",
         "build": "npm run tslint &&  rm -rf dist && tsc",
         "tslint": "npm run tslint-src && npm run tslint-root",
         "tslint-src": "tslint -c tslint.json src/**/*.ts",
@@ -16,27 +17,31 @@
     "license": "Apache-2.0",
     "dependencies": {
         "angular2": "2.0.0-beta.15",
-        "es6-promise": "3.0.2",
+        "es6-shim": "^0.35.0",
-        "es6-shim": "0.35.0",
+        "ng2-alfresco-viewer": "file:../",
+        "material-design-icons": "^2.2.3",
+        "material-design-lite": "^1.1.3",
         "reflect-metadata": "0.1.2",
         "rxjs": "5.0.0-beta.2",
-        "zone.js": "0.6.6",
+        "systemjs": "0.19.26",
-        "ng2-alfresco-viewer": "^0.1.4",
+        "zone.js": "0.6.10"
-        "material-design-icons": "^2.2.3",
-        "material-design-lite": "^1.1.3"
     },
     "devDependencies": {
-        "http-server": "0.8.5",
+        "browser-sync": "^2.10.0",
-        "systemjs": "0.19.17",
+        "concurrently": "^2.0.0",
+        "lite-server": "^2.2.0",
         "tslint": "^3.8.1",
-        "typescript": "1.7.5",
+        "typescript": "^1.8.10",
-        "typings": "0.6.8"
+        "typings": "^0.7.12"
     },
+    "contributors": [
+        {
+            "name": "Eugenio Romano",
+            "email": "eugenio.romano@alfresco.com"
+        }
+    ],
     "keywords": [
         "angular2",
         "typescript"
-    ],
+    ]
-    "publishConfig": {
-        "registry": "http://devproducts.alfresco.me:4873/"
-    }
 }

ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js

@@ -0,0 +1,52 @@
+/**
+ * @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.
+ */
+
+(function (global) {
+
+    // map tells the System loader where to look for things
+    var map = {
+        'ng2-alfresco-viewer': 'node_modules/ng2-alfresco-viewer',
+        'rxjs': 'node_modules/rxjs',
+        'angular2': 'node_modules/angular2',
+        'app': 'dist/main'
+    };
+
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'src': {
+            defaultExtension: 'js'
+        },
+        'ng2-alfresco-viewer': {
+            defaultExtension: 'js'
+        },
+        'rxjs': {
+            defaultExtension: 'js'
+        },
+        'angular2': {
+            defaultExtension: 'js'
+        }
+    };
+
+    var config = {
+        defaultJSExtensions: true,
+        map: map,
+        packages: packages
+    };
+
+    System.config(config);
+
+})(this);

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

@@ -29,6 +29,12 @@
     "bugs": {
         "url": "https://github.com/alfresco/ng2-alfresco-viewer/issues"
     },
+    "contributors": [
+        {
+            "name": "Eugenio Romano",
+            "email": "eugenio.romano@alfresco.com"
+        }
+    ],
     "keywords": [
         "ng2",
         "angular",

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

@@ -10,7 +10,7 @@
 
                 <!-- pagination toolbar start -->
                 <div id="viewer-toolbar-pagination">
-                    <div id="viewer-previouspage-button" class="left" (click)="previousPage()">
+                    <div id="viewer-previous-page-page-button-input" class="left" (click)="previousPage()">
                         <i class="icon material-icons">keyboard_arrow_left</i>
                     </div>
 
@@ -18,7 +18,7 @@
                            (keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}">
                     <span id="viewer-total-pages"  class="left">/ {{totalPages}}</span>
 
-                    <div id="viewer-nextpage-button" (click)="nextPage()"  class="left">
+                    <div id="viewer-next-page-button-button-input" (click)="nextPage()"  class="left">
                         <i class="icon material-icons" >keyboard_arrow_right</i>
                     </div>
                 </div>
@@ -33,23 +33,10 @@
                     <div class="button-container">
                         <button
                             class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="cazzo()">
-                            <i id="tt2" class="icon material-icons">print</i>
+                            <i id="viewer-print-button" class="icon material-icons">print</i>
                         </button>
                     </div>
 
-                    <div class="button-container">
-                        <button
-                            class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
-                            <i id="cloud-upload" class="icon material-icons">cloud_upload</i>
-                        </button>
-                    </div>
-
-                    <div class="button-container">
-                        <button
-                            class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
-                            <i id="share" class="icon material-icons">share</i>
-                        </button>
-                    </div>
 
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                           mdl-textfield--floating-label mdl-textfield--align-right">
@@ -79,12 +66,12 @@
                         class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
 
                         <!-- Start Pdf Canvas -->
-                        <div id="canvas-container">
+                        <div id="viewer-canvas-container">
-                            <canvas id="the-canvas" style="border:1px solid black;"></canvas>
+                            <canvas id="viewer-the-canvas" style="border:1px solid black;"></canvas>
                         </div>
                         <!-- End Pdf Canvas -->
 
-                        <div class="previous-page-button">
+                        <div id="viewer-previous-page-button" class="previous-page-button">
                             <button
                                 class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
                                 (click)="previousPage()">
@@ -92,7 +79,7 @@
                             </button>
                         </div>
 
-                        <div class="next-page-button">
+                        <div id="viewer-next-page-button" class="next-page-button">
                             <button
                                 class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
                                 (click)="nextPage()">

ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts

@@ -17,18 +17,44 @@
 
 import {describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders} from 'angular2/testing';
 import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser';
-import {ViewerComponent} from '../src/viewer.component';
+import {ViewerComponent} from './viewer.component';
 
-describe('Basic Example test ng2-alfresco-viewer', () => {
+describe('Ng2-alfresco-viewer', () => {
     setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
 
-    it('Test hello world', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    describe('View', () => {
-        return tcb
+        it('Next an Previous Buttons have to be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-            .createAsync(ViewerComponent)
+            return tcb
-            .then((fixture) => {
+                .createAsync(ViewerComponent)
-                let element = fixture.nativeElement;
+                .then((fixture) => {
-                expect(element.querySelector('h1')).toBeDefined();
+                    let element = fixture.nativeElement;
-                expect(element.getElementsByTagName('h1')[0].innerHTML).toEqual('ng2-alfresco-viewer');
+                    expect(element.querySelector('#viewer-previous-page-button')).toBeDefined();
-            });
+                    expect(element.querySelector('#viewer-next-page-button')).toBeDefined();
-    }));
+                });
+        }));
+
+        it('Input Page elements have to be present', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(ViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
+                    expect(element.querySelector('#viewer-total-pages')).toBeDefined();
+
+                    expect(element.querySelector('#viewer-previous-page-page-button-input')).toBeDefined();
+                    expect(element.querySelector('#viewer-next-page-page-button-input')).toBeDefined();
+                });
+        }));
+
+        it('Total number of pages should be showed', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            return tcb
+                .createAsync(ViewerComponent)
+                .then((fixture) => {
+                    let element = fixture.nativeElement;
+                    let component = fixture.componentInstance;
+                    component.totalPages = 10;
+                    expect(element.querySelector('#viewer-total-pages').innerHTML()).toEqual('10');
+                });
+        }));
+    });
 });

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

@@ -60,7 +60,7 @@ export class ViewerComponent {
             let scale = 1.5;
             let viewport = page.getViewport(scale);
 
-            let canvas: any = document.getElementById('the-canvas');
+            let canvas: any = document.getElementById('viewer-the-canvas');
 
             if (canvas) {
                 let context = canvas.getContext('2d');