@vaadin-component-factory/vcf-pdf-viewer 1.1.0 → 1.2.0

package/src/vcf-pdf-viewer.js

@@ -5,6 +5,8 @@ import '@vaadin/polymer-legacy-adapter/template-renderer.js';
 import '@vaadin/text-field';
 import '@vaadin/select';
 import '@vaadin/item';
+import '@vaadin/button';
+import '@vaadin/icon';
 
 import * as pdfjsLib from '../pdfjs/dist/pdf';
 import * as pdfjsViewer from '../pdfjs/dist/pdf_viewer';
@@ -235,6 +237,12 @@ class PdfViewerElement extends
                 margin-right: 15px;
                 border: 2px solid;
                 border-color: rgba(0, 0, 0, 0.5);
+                width: 40px;
+            }
+
+            #nextPage, #previousPage {
+                width: 30px;
+                margin: 0;
             }
 
         </style>
@@ -247,7 +255,9 @@ class PdfViewerElement extends
         </div>   
         <div id="mainContainer" part="main-container">
             <div id="toolbar" part="toolbar">
-                <button id="sidebarToggle" part="toolbar-button toolbar-button-toogle-sidebar" on-click="__toogleSidebar"></button>
+                <vaadin-button id="sidebarToggle" part="toolbar-button toolbar-button-toogle-sidebar" theme="icon" on-click="__toogleSidebar">
+                    <vaadin-icon part="toggle-button-icon" slot="prefix"></vaadin-icon>
+                </vaadin-button>
                 <span id="title" part="toolbar-text toolbar-title">{{__title}}</span>
                 <vaadin-select id="zoom" part="toolbar-zoom" value="{{zoom}}">
                 <template>
@@ -269,8 +279,12 @@ class PdfViewerElement extends
                     <vaadin-text-field id="currentPage" part="toolbar-current-page" value="{{currentPage}}" on-change="__pageChange"></vaadin-text-field>
                     <span id="pageSeparator" part="toolbar-text toolbar-page-separator">/</span>
                     <span id="totalPages" part="toolbar-text toolbar-total-pages">{{__totalPages}}</span>
-                    <button id="previousPage" part="toolbar-button toolbar-button-previous-page" on-click="__previousPage"></button>
-                    <button id="nextPage" part="toolbar-button toolbar-button-next-page" on-click="__nextPage"></button>
+                    <vaadin-button id="previousPage" part="toolbar-button toolbar-button-previous-page" theme="icon" on-click="__previousPage">
+                        <vaadin-icon part="previous-page-button-icon" slot="prefix"></vaadin-icon>
+                    </vaadin-button>
+                    <vaadin-button id="nextPage" part="toolbar-button toolbar-button-next-page" theme="icon" on-click="__nextPage">
+                        <vaadin-icon part="next-page-button-icon" slot="prefix"></vaadin-icon>
+                    </vaadin-button>
                 </div>
                 <slot></slot>
             </div>
@@ -289,7 +303,7 @@ class PdfViewerElement extends
     }
 
     static get version() {
-        return '1.1.0';
+        return '1.2.0';
     }
 
     static get properties() {
@@ -403,6 +417,14 @@ class PdfViewerElement extends
                 type: String,
                 value: "Page fit"
             },
+
+            /**
+             * Property to define a custom title for the viewer
+             */
+             customTitle: {
+                type: String,
+                value: ""
+            },
         };
     }
 
@@ -413,7 +435,9 @@ class PdfViewerElement extends
     }
 
     __setTitle(pdfTitle, filename) {
-        if(this.__viewer && this.toolbarOnlyFilename && filename) {
+        if(this.customTitle){
+            this.__title = this.customTitle;
+        } else if(this.__viewer && this.toolbarOnlyFilename && filename) {
             this.__title = filename;
         } else if (pdfTitle && filename) {            
             this.__title = pdfTitle + ' - ' + filename;

package/theme/lumo/vcf-pdf-viewer-styles.js

@@ -81,7 +81,7 @@ registerStyles(
         padding-top: 0.2em;
       }
 
-      [part~="toolbar-button"]:disabled {
+      [part~="toolbar-button"][disabled] {
         color: var(--lumo-contrast-40pct);
       }
 
@@ -90,7 +90,7 @@ registerStyles(
         color: var(--lumo-contrast-80pct);
       }
 
-      [part~="toolbar-button"]:disabled:hover {
+      [part~="toolbar-button"][disabled]:hover {
         background-color: transparent;
         color: var(--lumo-contrast-40pct);
       }
@@ -105,19 +105,19 @@ registerStyles(
         font-size: var(--lumo-icon-size-m);
       }
 
-      [part~="toolbar-button-previous-page"]::before {
+      [part~="previous-page-button-icon"]::before {
         content: var(--lumo-icons-angle-up);
       }
 
-      [part~="toolbar-button-next-page"]::before {
+      [part~="next-page-button-icon"]::before {
         content: var(--lumo-icons-angle-down);
       }
 
-      [part~="toolbar-button-toogle-sidebar"]::before {
+      [part~="toggle-button-icon"]::before {
         content: var(--lumo-icons-chevron-right);
       }
 
-      #outerContainer.sidebarOpen [part~="toolbar-button-toogle-sidebar"]::before {
+      #outerContainer.sidebarOpen [part~="toggle-button-icon"]::before {
         content: var(--lumo-icons-chevron-left);
       }
 

package/theme/material/vcf-pdf-viewer-styles.js

@@ -75,7 +75,7 @@ registerStyles(
         opacity: 0.7;
       }
 
-      [part~="toolbar-button"]:disabled {
+      [part~="toolbar-button"][disabled] {
         opacity: 0.4;
       }
 
@@ -83,15 +83,15 @@ registerStyles(
         opacity: 1;
       }
 
-      [part~="toolbar-button"]:disabled:hover {
+      [part~="toolbar-button"][disabled]:hover {
         opacity: 0.4;
       }
 
-      [part~="toolbar-button-previous-page"]::before {
+      [part~="previous-page-button-icon"]::before {
         content: url('baseline-keyboard_arrow_up-24px.svg');
       }
 
-      [part~="toolbar-button-next-page"]::before {
+      [part~="next-page-button-icon"]::before {
         content: url('baseline-keyboard_arrow_down-24px.svg');
       }