Merge pull request #874 from Alfresco/dev-eromano-836

fix host pdf css with >>> prefix #836

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

@@ -42,7 +42,7 @@
 
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
             'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'}
         }
     });
 })(this);

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

@@ -59,33 +59,37 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
 
         component.showToolbar = true;
         component.urlFile = 'base/src/assets/fake-test-file.pdf';
-        fixture.detectChanges();
 
         fixture.detectChanges();
     });
 
     describe('View', () => {
+
+        it('If urlfile is not present should not be thrown any error ', () => {
+            component.urlFile = undefined;
+
+            fixture.detectChanges();
+
+            expect(() => {
+                component.ngOnChanges();
+            }).toThrow();
+        });
+
         it('Canvas should be present', () => {
             expect(element.querySelector('#viewer-viewerPdf')).not.toBeNull();
             expect(element.querySelector('#viewer-pdf-container')).not.toBeNull();
         });
 
         it('Loader should be present', () => {
-            fixture.detectChanges();
-
             expect(element.querySelector('#loader-container')).not.toBeNull();
         });
 
         it('Next an Previous Buttons should be present', () => {
-            fixture.detectChanges();
-
             expect(element.querySelector('#viewer-previous-page-button')).not.toBeNull();
             expect(element.querySelector('#viewer-next-page-button')).not.toBeNull();
         });
 
         it('Input Page elements should be present', () => {
-            fixture.detectChanges();
-
             expect(element.querySelector('#viewer-pagenumber-input')).toBeDefined();
             expect(element.querySelector('#viewer-total-pages')).toBeDefined();
 
@@ -109,10 +113,10 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
             component.inputPage(1);
         });
 
-        xit('Total number of pages should be loaded', (done) => {
+        it('Total number of pages should be loaded', (done) => {
             component.ngOnChanges().then(() => {
                 fixture.detectChanges();
-                expect(component.totalPages).toEqual(4);
+                expect(component.totalPages).toEqual(6);
                 done();
             });
         }, 5000);
@@ -241,7 +245,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
     });
 
     describe('Resize interaction', () => {
-        xit('resize event should trigger setScaleUpdatePages', (done) => {
+        it('resize event should trigger setScaleUpdatePages', (done) => {
             component.ngOnChanges().then(() => {
                 fixture.detectChanges();
                 spyOn(component, 'onResize');
@@ -254,7 +258,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
     });
 
     describe('scroll interaction', () => {
-        xit('scroll page should return the current page', (done) => {
+        it('scroll page should return the current page', (done) => {
             component.ngOnChanges().then(() => {
                 fixture.detectChanges();
                 expect(component.displayPage).toBe(1);
@@ -265,7 +269,7 @@ describe('Test ng2-alfresco-viewer PdfViewer component', () => {
                 documentContainer.scrollTop = 100000;
                 component.watchScroll(documentContainer);
                 fixture.detectChanges();
-                expect(component.displayPage).toBe(4);
+                expect(component.displayPage).toBe(6);
                 done();
             });
         });

ng2-components/ng2-alfresco-viewer/src/componets/pdfViewerHost.component.css

@@ -1,4 +1,4 @@
-:host .textLayer {
+:host >>> .textLayer {
     position: absolute;
     left: 0;
     top: 0;
@@ -9,7 +9,7 @@
     line-height: 1.0;
 }
 
-:host .textLayer > div {
+:host >>> .textLayer > div {
     color: transparent;
     position: absolute;
     white-space: pre;
@@ -21,7 +21,7 @@
     transform-origin: 0% 0%;
 }
 
-:host .textLayer .highlight {
+:host >>> .textLayer .highlight {
     margin: -1px;
     padding: 1px;
 
@@ -29,26 +29,26 @@
     border-radius: 4px;
 }
 
-:host .textLayer .highlight.begin {
+:host >>> .textLayer .highlight.begin {
     border-radius: 4px 0px 0px 4px;
 }
 
-:host .textLayer .highlight.end {
+:host >>> .textLayer .highlight.end {
     border-radius: 0px 4px 4px 0px;
 }
 
-:host .textLayer .highlight.middle {
+:host >>> .textLayer .highlight.middle {
     border-radius: 0px;
 }
 
-:host .textLayer .highlight.selected {
+:host >>> .textLayer .highlight.selected {
     background-color: rgb(0, 100, 0);
 }
 
-:host .textLayer ::selection { background: rgb(0,0,255); }
-:host .textLayer ::-moz-selection { background: rgb(0,0,255); }
+:host >>> .textLayer ::selection { background: rgb(0,0,255); }
+:host >>> .textLayer ::-moz-selection { background: rgb(0,0,255); }
 
-:host .textLayer .endOfContent {
+:host >>> .textLayer .endOfContent {
     display: block;
     position: absolute;
     left: 0px;
@@ -62,16 +62,16 @@
     -moz-user-select: none;
 }
 
-:host .textLayer .endOfContent.active {
+:host >>> .textLayer .endOfContent.active {
     top: 0px;
 }
 
 
-:host .annotationLayer section {
+:host >>> .annotationLayer section {
     position: absolute;
 }
 
-:host .annotationLayer .linkAnnotation > a {
+:host >>> .annotationLayer .linkAnnotation > a {
     position: absolute;
     font-size: 1em;
     top: 0;
@@ -80,27 +80,27 @@
     height: 100%;
 }
 
-:host .annotationLayer .linkAnnotation > a /* -ms-a */  {
+:host >>> .annotationLayer .linkAnnotation > a /* -ms-a */  {
     background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
 }
 
-:host .annotationLayer .linkAnnotation > a:hover {
+:host >>> .annotationLayer .linkAnnotation > a:hover {
     opacity: 0.2;
     background: #ff0;
     box-shadow: 0px 2px 10px #ff0;
 }
 
-:host .annotationLayer .textAnnotation img {
+:host >>> .annotationLayer .textAnnotation img {
     position: absolute;
     cursor: pointer;
 }
 
-:host .annotationLayer .popupWrapper {
+:host >>> .annotationLayer .popupWrapper {
     position: absolute;
     width: 20em;
 }
 
-:host .annotationLayer .popup {
+:host >>> .annotationLayer .popup {
     position: absolute;
     z-index: 200;
     max-width: 20em;
@@ -113,17 +113,17 @@
     word-wrap: break-word;
 }
 
-:host .annotationLayer .popup h1 {
+:host >>> .annotationLayer .popup h1 {
     font-size: 1em;
     border-bottom: 1px solid #000000;
     padding-bottom: 0.2em;
 }
 
-:host .annotationLayer .popup p {
+:host >>> .annotationLayer .popup p {
     padding-top: 0.2em;
 }
 
-:host .annotationLayer .highlightAnnotation,
+:host >>> .annotationLayer .highlightAnnotation,
 .annotationLayer .underlineAnnotation,
 .annotationLayer .squigglyAnnotation,
 .annotationLayer .strikeoutAnnotation,
@@ -131,11 +131,11 @@
     cursor: pointer;
 }
 
-:host .pdfViewer .canvasWrapper {
+:host >>> .pdfViewer .canvasWrapper {
     overflow: hidden;
 }
 
-:host .pdfViewer .page {
+:host >>> .pdfViewer .page {
     direction: ltr;
     width: 816px;
     height: 1056px;
@@ -147,17 +147,17 @@
     background-color: white;
 }
 
-:host .pdfViewer.removePageBorders .page {
+:host >>> .pdfViewer.removePageBorders .page {
     margin: 0px auto 10px auto;
     border: none;
 }
 
-:host .pdfViewer .page canvas {
+:host >>> .pdfViewer .page canvas {
     margin: 0;
     display: block;
 }
 
-:host .pdfViewer .page .loadingIcon {
+:host >>> .pdfViewer .page .loadingIcon {
     position: absolute;
     display: block;
     left: 0;
@@ -166,7 +166,7 @@
     bottom: 0;
 }
 
-:host .loadingIcon {
+:host >>> .loadingIcon {
     width: 100px;
     height: 100px;
     left: 50% !important;
@@ -187,8 +187,8 @@
     -webkit-animation: load8 1.1s infinite linear;
     animation: load8 1.1s infinite linear;
 }
-:host .loadingIcon,
-:host .loadingIcon:after {
+:host >>> .loadingIcon,
+:host >>> .loadingIcon:after {
     border-radius: 50%;
 }
 @-webkit-keyframes load8 {
@@ -212,26 +212,26 @@
     }
 }
 
-:host * {
+:host >>> * {
     padding: 0;
     margin: 0;
 }
 
-:host html {
+:host >>> html {
     height: 100%;
     width: 100%;
     /* Font size is needed to make the activity bar the correct size. */
     font-size: 10px;
 }
 
-:host body {
+:host >>> body {
     height: 100%;
     width: 100%;
     background-color: #404040;
     background-image: url(images/texture.png);
 }
 
-:host body,
+:host >>> body,
 input,
 button,
 select {
@@ -239,10 +239,10 @@ select {
     outline: none;
 }
 
-:host .hidden {
+:host >>> .hidden {
     display: none !important;
 }
-:host [hidden] {
+:host >>> [hidden] {
     display: none !important;
 }