[ADF-2338] PDF Thumbnail Pane - close button (#2977)

* close thumblist panel

* thumbnails template container

docs/viewer.component.md

@@ -306,7 +306,7 @@ export class CustomThumbnailsComponent {
 ```
 
 ```html
-<ng-template let-pdfViewer="viewer" #customThumbnailsTemplate>
+<ng-template #customThumbnailsTemplate let-pdfViewer="viewer">
     <custom-thumbnails [pdfViewer]="pdfViewer"></custom-thumbnails>
 </ng-template>
 

lib/core/viewer/components/pdfViewer-thumbnails.component.scss

@@ -16,16 +16,16 @@
         }
 
         &__thumb:first-child {
-            margin-top: 14px;
+            margin-top: 15px;
         }
 
         &__thumb {
             cursor: pointer;
             display: block;
-            height: 140px;
+            height: 114px;
-            width: 100px;
+            width: 91px;
             background: mat-color($background, background);
-            margin-bottom: 14px;
+            margin-bottom: 15px;
         }
 
         &__thumb:hover {

lib/core/viewer/components/pdfViewer-thumbnails.component.spec.ts

@@ -81,7 +81,7 @@ describe('PdfThumbListComponent', () => {
         fixture.detectChanges();
 
         const renderedIds = component.renderItems.map(item => item.id);
-        const rangeIds = viewerMock._pages.slice(0, 5).map(item => item.id);
+        const rangeIds = viewerMock._pages.slice(0, 7).map(item => item.id);
 
         expect(renderedIds).toEqual(rangeIds);
     });
@@ -91,7 +91,7 @@ describe('PdfThumbListComponent', () => {
         fixture.detectChanges();
 
         const renderedIds = component.renderItems.map(item => item.id);
-        const rangeIds = viewerMock._pages.slice(5, 10).map(item => item.id);
+        const rangeIds = viewerMock._pages.slice(6, 14).map(item => item.id);
 
         expect(renderedIds).toEqual(rangeIds);
     });

lib/core/viewer/components/pdfViewer-thumbnails.component.ts

@@ -35,7 +35,7 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy {
     renderItems = [];
 
     private items = [];
-    private itemHeight: number = 140;
+    private itemHeight: number = 114;
 
     @ContentChild(TemplateRef)
     template: any;

lib/core/viewer/components/pdfViewer.component.html

@@ -1,12 +1,21 @@
 <div class="adf-pdf-viewer__container">
     <ng-container *ngIf="showThumbnails">
         <div class="adf-pdf-viewer__thumbnails">
-            <ng-container *ngIf="thumbnailsTemplate">
+            <div class="thumbnails-template__container">
-                <ng-container *ngTemplateOutlet="thumbnailsTemplate;context:pdfThumbnailsContext"></ng-container>
+                <div class="thumbnails-template__buttons">
-            </ng-container>
+                    <button mat-icon-button (click)="toggleThumbnails()">
-            <ng-container *ngIf="!thumbnailsTemplate">
+                            <mat-icon>close</mat-icon>
-                <adf-pdf-thumbnails [pdfViewer]="pdfViewer"></adf-pdf-thumbnails>
+                    </button>
-            </ng-container>
+                </div>
+
+                <ng-container *ngIf="thumbnailsTemplate">
+                    <ng-container *ngTemplateOutlet="thumbnailsTemplate;context:pdfThumbnailsContext"></ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="!thumbnailsTemplate">
+                    <adf-pdf-thumbnails [pdfViewer]="pdfViewer"></adf-pdf-thumbnails>
+                </ng-container>
+            </div>
         </div>
     </ng-container>
 

lib/core/viewer/components/pdfViewer.component.scss

@@ -22,7 +22,25 @@
         }
 
         &__thumbnails {
-            position: relative; height: 100%; width: 140px; background-color: rgba(0, 0, 0, 0.12);
+            position: relative;
+            height: 100%;
+            width: 190px;
+            background-color: rgba(0, 0, 0, 0.12);
+        }
+
+        .thumbnails-template {
+            &__container {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+            }
+
+            &__buttons {
+                height: 45px;
+                justify-content: flex-end;
+                align-items: flex-end;
+                display: flex;
+            }
         }
 
         &__container {

lib/core/viewer/components/pdfViewer.component.spec.ts

@@ -388,4 +388,38 @@ describe('Test PdfViewer component', () => {
             });
         });
     });
+
+    describe('Thumbnails', () => {
+        beforeEach(() => {
+            component.urlFile = require('../assets/fake-test-file.pdf');
+            component.showThumbnails = false;
+
+            fixture.detectChanges();
+        });
+
+        it('should have own context', (done) => {
+            component.ngOnChanges(null).then(() => {
+                fixture.detectChanges();
+                return fixture.whenStable().then(() => {
+                    expect(component.pdfThumbnailsContext.viewer).not.toBeNull();
+                    done();
+                });
+            });
+        });
+
+        it('should open thumbnails panel', (done) => {
+            expect(element.querySelector('.adf-pdf-viewer__thumbnails')).toBeNull();
+
+            component.ngOnChanges(null).then(() => {
+                fixture.detectChanges();
+                return fixture.whenStable().then(() => {
+                    component.toggleThumbnails();
+                    fixture.detectChanges();
+
+                    expect(element.querySelector('.adf-pdf-viewer__thumbnails')).not.toBeNull();
+                    done();
+                });
+            });
+        });
+    });
 });

lib/core/viewer/components/pdfViewer.component.ts

@@ -67,7 +67,7 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     MIN_SCALE: number = 0.25;
     MAX_SCALE: number = 10.0;
 
-    showThumbnails = false;
+    showThumbnails: boolean = false;
     pdfThumbnailsContext: { viewer: any } = { viewer: null };
 
     get currentScaleText(): string {