ngx-extended-pdf-viewer/bundles/ngx-extended-pdf-viewer.umd.min.js

<p> <a href="https://www.npmjs.com/package/ngx-extended-pdf-viewer"> <img src="https://img.shields.io/npm/dm/ngx-extended-pdf-viewer.svg?style=flat" alt="downloads"> </a> <a href="https://badge.fury.io/js/ngx-extended-pdf-viewer"> <img src="

!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-extended-pdf-viewer",["exports","@angular/core","@angular/common"],o):o((t=t||self)["ngx-extended-pdf-viewer"]={},t.ng.core,t.ng.common)}(this,function(t,o,e){"use strict";function A(t,o,e,A){var n,i=arguments.length,a=i<3?o:null===A?A=Object.getOwnPropertyDescriptor(o,e):A;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,o,e,A);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(a=(i<3?n(a):i>3?n(o,e,a):n(o,e))||a);return i>3&&a&&Object.defineProperty(o,e,a),a}function n(t,o){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,o)}var i=function(){function t(){this.initialized=!1,this.delayFirstView=0,this.primaryMenuVisible=!0,this.minHeight=undefined,this._height="100%",this.useBrowserLocale=!1,this.backgroundColor="#e8e8eb",this.filenameForDownload="document.pdf",this.language=undefined,this.listenToURL=!1,this.nameddest=undefined,this.password=undefined,this._showSidebarButton=!0,this.viewerPositionTop="32px",this.showSidebarOnLoad=undefined,this.showFindButton=!0,this.showPagingButtons=!0,this.showZoomButtons=!0,this.showPresentationModeButton=!1,this.showOpenFileButton=!0,this.showPrintButton=!0,this.showDownloadButton=!0,this.showBookmarkButton=!0,this.showSecondaryToolbarButton=!0,this.showRotateButton=!0,this.showSelectToolButton=!0,this.handTool=!1,this.showHandToolButton=!0,this.showScrollingButton=!0,this.showSpreadButton=!0,this.showPropertiesButton=!0,this.spreadChange=new o.EventEmitter,this.page=undefined,this.pageChange=new o.EventEmitter,this.pagesLoaded=new o.EventEmitter,this.pageRendered=new o.EventEmitter,this.zoom=undefined,this.zoomChange=new o.EventEmitter,this._mobileFriendlyZoom="100%",this.toolbarWidth="100%",this.findbarTop=undefined,this.findbarLeft=undefined,this.secondaryToolbarRight=undefined,this._top=undefined}return Object.defineProperty(t.prototype,"src",{set:function(t){t instanceof Uint8Array?this._src=t.buffer:t instanceof Blob?this._src=URL.createObjectURL(t):"string"==typeof t?(this._src=t,t.length>980&&t.length%4==0&&/^[a-zA-Z\d\/+]+={0,2}$/.test(t)&&console.warn("The URL looks like a base64 encoded string. If so, please use the attribute base64 instead of src")):this._src=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"base64Src",{set:function(t){for(var o=window.atob(t),e=o.length,A=new Uint8Array(e),n=0;n<e;n++)A[n]=o.charCodeAt(n);this.src=A.buffer},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"height",{get:function(){return this._height},set:function(t){var o=this;this.minHeight=undefined,t?this._height=t:this.height="100%",setTimeout(function(){o.checkHeight()})},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"showSidebarButton",{get:function(){return this._showSidebarButton},set:function(t){this._showSidebarButton=t;var o=1;/msie\s|trident\//i.test(window.navigator.userAgent)&&(o=Number((this._mobileFriendlyZoom||"100").replace("%",""))/100),this._showSidebarButton?this.findbarLeft=(68*o).toString()+"px":this.findbarLeft="0px"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"mobileFriendlyZoom",{get:function(){return this._mobileFriendlyZoom},set:function(t){this._mobileFriendlyZoom=t;var o=/msie\s|trident\//i.test(window.navigator.userAgent),e=1;o&&(e=Number((t||"100").replace("%",""))/100),this.showSidebarButton?this.findbarLeft=(68*e).toString()+"px":this.findbarLeft="0px",o&&(this.toolbarWidth=(100/e).toString()+"%",this.findbarTop=(32*e).toString()+"px",this.secondaryToolbarRight=(252*(e-1)).toString()+"px")},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"mobileZoom",{set:function(t){this.mobileFriendlyZoom=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sidebarPositionTop",{get:function(){if(this._top)return this._top;if(this.mobileFriendlyZoom){if(this.mobileFriendlyZoom.endsWith("%"))return(.32*Number(this.mobileFriendlyZoom.substring(0,this.mobileFriendlyZoom.length-1))).toString()+"px";if(this.mobileFriendlyZoom.endsWith("px"))return this.mobileFriendlyZoom}return"32px"},enumerable:!0,configurable:!0}),t.prototype.calcViewerPositionTop=function(){if(this._top)this.viewerPositionTop=this._top;else{if(this.mobileFriendlyZoom){if(this.mobileFriendlyZoom.endsWith("%")){var t=Number(this.mobileFriendlyZoom.substring(0,this.mobileFriendlyZoom.length-1));return void(this.isPrimaryMenuVisible()?this.viewerPositionTop=(1+.32*t).toString()+"px":this.viewerPositionTop="0")}if(this.mobileFriendlyZoom.endsWith("px"))return void(this.viewerPositionTop=this.mobileFriendlyZoom)}this.isPrimaryMenuVisible()?this.viewerPositionTop="32px":this.viewerPositionTop="0"}},t.prototype.emitZoomChange=function(){var t=this.sizeSelector.nativeElement.selectedIndex;if(t){var o=this.sizeSelector.nativeElement.options[t],e=o.label;e=e.endsWith("%")?Number(e.replace("%","")):o.value,this.zoomChange.emit(e)}},t.prototype.emitZoomChangeAfterDelay=function(){var t=this;setTimeout(function(){t.emitZoomChange()},10)},t.prototype.ngOnInit=function(){var t=this;document.addEventListener("webviewerloaded",function(){t.overrideDefaultSettings()}),setTimeout(function(){t.primaryMenuVisible=!0,t.isSecondaryMenuVisible()||(t.showSecondaryToolbarButton=!1),t.showSecondaryToolbarButton||t.isPrimaryMenuVisible()||(t.primaryMenuVisible=!1),t.calcViewerPositionTop(),window.webViewerLoad(),window.PDFViewerApplication.appConfig.defaultUrl="",window.PDFViewerApplicationOptions.set("locale",t.language),window.PDFViewerApplication.isViewerEmbedded=!0,t.overrideDefaultSettings();var o=document.getElementById("printContainer");o&&document.getElementsByTagName("body")[0].appendChild(o)},0)},t.prototype.checkHeight=function(){var t=document.getElementsByClassName("zoom")[0];if(0===t.clientHeight&&this._height.includes("%")){var o=window.innerHeight-t.getBoundingClientRect().top;o=o*Number(this._height.replace("%",""))/100,this.minHeight=o>100?o+"px":"100px"}},t.prototype.onPageChange=function(){var t=this;setTimeout(function(){var o=document.getElementById("pageNumber"),e=Number(o.value);isNaN(e)&&(e=undefined),t.pageChange.emit(e)})},t.prototype.onSpreadChange=function(t){this.spreadChange.emit(t)},t.prototype.overrideDefaultSettings=function(){if(window.PDFViewerApplication.overrideHistory={},this.zoom){var t=this.zoom;"number"!=typeof t&&t.endsWith("%")&&(t=t.replace("%","")),window.PDFViewerApplication.overrideHistory.zoom=t}window.PDFViewerApplication.appConfig?window.PDFViewerApplication.appConfig.filenameForDownload=this.filenameForDownload:window.PDFViewerApplicationOptions.set("filenameForDownload",this.filenameForDownload),this.showSidebarButton?this.showSidebarOnLoad!==undefined&&(window.PDFViewerApplication.sidebarViewOnLoad=this.showSidebarOnLoad?1:0,window.PDFViewerApplication.appConfig&&(window.PDFViewerApplication.appConfig.sidebarViewOnLoad=this.showSidebarOnLoad?1:0),window.PDFViewerApplication.overrideHistory.sidebarViewOnLoad=this.showSidebarOnLoad?1:0):(window.PDFViewerApplication.sidebarViewOnLoad=0,window.PDFViewerApplication.appConfig&&(window.PDFViewerApplication.appConfig.sidebarViewOnLoad=0),window.PDFViewerApplication.overrideHistory.sidebarViewOnLoad=0),"even"===this.spread?(window.PDFViewerApplicationOptions.set("spreadModeOnLoad",2),window.PDFViewerApplication.pdfViewer&&(window.PDFViewerApplication.pdfViewer.spreadMode=2),this.onSpreadChange("even")):"odd"===this.spread?(window.PDFViewerApplicationOptions.set("spreadModeOnLoad",1),window.PDFViewerApplication.pdfViewer&&(window.PDFViewerApplication.pdfViewer.spreadMode=1),this.onSpreadChange("odd")):(window.PDFViewerApplicationOptions.set("spreadModeOnLoad",0),window.PDFViewerApplication.pdfViewer&&(window.PDFViewerApplication.pdfViewer.spreadMode=0),this.onSpreadChange("off"))},t.prototype.ngAfterViewInit=function(){var t=this;this.initTimeout=setTimeout(function(){if(t.listenToURL||(window.PDFViewerApplication.pdfLinkService.setHash=function(){}),t.initTimeout=null,window.PDFViewerApplication.eventBus.on("pagesloaded",function(o){t.pagesLoaded.emit(o),t.nameddest&&window.PDFViewerApplication.pdfLinkService.navigateTo(t.nameddest),t.overrideDefaultSettings()}),window.PDFViewerApplication.eventBus.on("pagerendered",function(o){t.pageRendered.emit(o)}),t.checkHeight(),t._src){var o={password:t.password};window.PDFViewerApplication.open(t._src,o)}setTimeout(function(){t.page&&(window.PDFViewerApplication.page=t.page)},100)},this.delayFirstView),this.initialized=!0},t.prototype.ngOnDestroy=function(){this.initTimeout&&(clearTimeout(this.initTimeout),this.initTimeout=undefined);var t=window.PDFViewerApplication;if(t){t.cleanup(),t.close(),t._boundEvents&&t.unbindWindowEvents();var o=t.eventBus;if(o)for(var e in t.unbindEvents(),o._listeners)o._listeners[e]&&(o._listeners[e]=undefined);t.eventBus=null}},t.prototype.isSecondaryMenuVisible=function(){return!!(this.showHandToolButton||this.showPagingButtons||this.showPropertiesButton||this.showRotateButton||this.showScrollingButton||this.showRotateButton||this.showSpreadButton||this.showSelectToolButton)},t.prototype.isPrimaryMenuVisible=function(){return!!(this.showBookmarkButton||this.showDownloadButton||this.showFindButton||this.showOpenFileButton||this.showPagingButtons||this.showPresentationModeButton||this.showPrintButton||this.showPropertiesButton||this.showSidebarButton||this.showSecondaryToolbarButton||this.showZoomButtons)},t.prototype.ngOnChanges=function(t){if(this.initialized){if("src"in t&&this._src&&(this.overrideDefaultSettings(),window.PDFViewerApplication.open(this._src)),"zoom"in t){var o=this.zoom;String(o).endsWith("%")?o=Number(String(o).replace("%",""))/100:isNaN(Number(o))||(o=Number(o)/100),window.PDFViewerApplication.pdfViewer.currentScaleValue=o}var e;if("handTool"in t)if(this.handTool)(e=document.getElementsByClassName("handTool"))&&e[0]&&e[0].click();else(e=document.getElementsByClassName("selectTool"))&&e[0]&&e[0].click();"page"in t&&this.page&&(window.PDFViewerApplication.page=this.page),"filenameForDownload"in t&&(window.PDFViewerApplication.appConfig.filenameForDownload=this.filenameForDownload),"nameddest"in t&&this.nameddest&&window.PDFViewerApplication.pdfLinkService.navigateTo(this.nameddest),"spread"in t&&("even"===this.spread?(window.PDFViewerApplication.spreadModeOnLoad=2,window.PDFViewerApplication.pdfViewer.spreadMode=2,this.onSpreadChange("even")):"odd"===this.spread?(window.PDFViewerApplication.spreadModeOnLoad=1,window.PDFViewerApplication.pdfViewer.spreadMode=1,this.onSpreadChange("odd")):(window.PDFViewerApplication.spreadModeOnLoad=0,window.PDFViewerApplication.pdfViewer.spreadMode=0,this.onSpreadChange("off"))),this.primaryMenuVisible=!0,this.isSecondaryMenuVisible()||(this.showSecondaryToolbarButton=!1),this.showSecondaryToolbarButton||this.isPrimaryMenuVisible()||(this.primaryMenuVisible=!1),this.calcViewerPositionTop()}},A([o.Input(),n("design:type",Object)],t.prototype,"delayFirstView",void 0),A([o.Input(),n("design:type",Object),n("design:paramtypes",[Object])],t.prototype,"src",null),A([o.Input(),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"base64Src",null),A([o.Input(),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"height",null),A([o.Input(),n("design:type",Object)],t.prototype,"useBrowserLocale",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"backgroundColor",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"filenameForDownload",void 0),A([o.Input(),n("design:type",String)],t.prototype,"language",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"listenToURL",void 0),A([o.Input(),n("design:type",String)],t.prototype,"nameddest",void 0),A([o.Input(),n("design:type",String)],t.prototype,"password",void 0),A([o.Input(),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"showSidebarButton",null),A([o.Input(),n("design:type",Boolean)],t.prototype,"showSidebarOnLoad",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showFindButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showPagingButtons",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showZoomButtons",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showPresentationModeButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showOpenFileButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showPrintButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showDownloadButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showBookmarkButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showSecondaryToolbarButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showRotateButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showSelectToolButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"handTool",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showHandToolButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showScrollingButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showSpreadButton",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"showPropertiesButton",void 0),A([o.Input(),n("design:type",String)],t.prototype,"spread",void 0),A([o.Output(),n("design:type",Object)],t.prototype,"spreadChange",void 0),A([o.Input(),n("design:type",Number)],t.prototype,"page",void 0),A([o.Output(),n("design:type",Object)],t.prototype,"pageChange",void 0),A([o.Output(),n("design:type",Object)],t.prototype,"pagesLoaded",void 0),A([o.Output(),n("design:type",Object)],t.prototype,"pageRendered",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"zoom",void 0),A([o.Output(),n("design:type",Object)],t.prototype,"zoomChange",void 0),A([o.Input(),n("design:type",Object)],t.prototype,"_mobileFriendlyZoom",void 0),A([o.Input(),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"mobileFriendlyZoom",null),A([o.Input(),n("design:type",String),n("design:paramtypes",[String])],t.prototype,"mobileZoom",null),A([o.ViewChild("sizeSelector",{"static":!0}),n("design:type",Object)],t.prototype,"sizeSelector",void 0),t=A([o.Component({selector:"ngx-extended-pdf-viewer",template:'<link\n  *ngIf="useBrowserLocale"\n  rel="resource"\n  type="application/l10n"\n  href="assets/locale/locale.properties"\n/>\n<div class="zoom" [style.height]="height" [style.minHeight]="minHeight">\n  <div class="html">\n    <div\n      tabindex="1"\n      class="loadingInProgress body"\n      [style.backgroundColor]="backgroundColor"\n    >\n      <div id="outerContainer">\n        <div id="sidebarContainer" [style.top]="sidebarPositionTop">\n          <div\n            id="additionalSidebarContainer"\n            [class.hidden]="!showSidebarButton"\n          >\n            <div id="toolbarSidebar">\n              <div class="splitToolbarButton toggled">\n                <button\n                  id="viewThumbnail"\n                  class="toolbarButton toggled"\n                  title="Show Thumbnails"\n                  tabindex="2"\n                  data-l10n-id="thumbs"\n                >\n                  <span data-l10n-id="thumbs_label">Thumbnails</span>\n                </button>\n                <button\n                  id="viewOutline"\n                  class="toolbarButton"\n                  title="Show Document Outline (double-click to expand/collapse all items)"\n                  tabindex="3"\n                  data-l10n-id="document_outline"\n                >\n                  <span data-l10n-id="document_outline_label"\n                    >Document Outline</span\n                  >\n                </button>\n                <button\n                  id="viewAttachments"\n                  class="toolbarButton"\n                  title="Show Attachments"\n                  tabindex="4"\n                  data-l10n-id="attachments"\n                >\n                  <span data-l10n-id="attachments_label">Attachments</span>\n                </button>\n              </div>\n            </div>\n          </div>\n          <div id="sidebarContent">\n            <div id="thumbnailView"></div>\n            <div id="outlineView" class="hidden"></div>\n            <div id="attachmentsView" class="hidden"></div>\n          </div>\n          <div id="sidebarResizer" class="hidden"></div>\n        </div>\n        \x3c!-- sidebarContainer --\x3e\n\n        <div id="mainContainer">\n          <div\n            class="findbar hidden doorHanger"\n            id="findbar"\n            [style.zoom]="mobileFriendlyZoom"\n            [style.top]="findbarTop"\n            [style.left]="findbarLeft"\n          >\n            <div id="findbarInputContainer">\n              <input\n                autocomplete="search-input-field"\n                id="findInput"\n                class="toolbarField"\n                title="Find"\n                placeholder="Find in document…"\n                tabindex="91"\n                data-l10n-id="find_input"\n                name="search-input-field"\n              />\n              <div class="splitToolbarButton">\n                <button\n                  id="findPrevious"\n                  class="toolbarButton findPrevious"\n                  title="Find the previous occurrence of the phrase"\n                  tabindex="92"\n                  data-l10n-id="find_previous"\n                >\n                  <span data-l10n-id="find_previous_label">Previous</span>\n                </button>\n                <div class="splitToolbarButtonSeparator"></div>\n                <button\n                  id="findNext"\n                  class="toolbarButton findNext"\n                  title="Find the next occurrence of the phrase"\n                  tabindex="93"\n                  data-l10n-id="find_next"\n                >\n                  <span data-l10n-id="find_next_label">Next</span>\n                </button>\n              </div>\n            </div>\n\n            <div id="findbarOptionsOneContainer">\n              <input\n                type="checkbox"\n                id="findHighlightAll"\n                class="toolbarField"\n                tabindex="94"\n              />\n              <label\n                for="findHighlightAll"\n                class="toolbarLabel"\n                data-l10n-id="find_highlight"\n                >Highlight all</label\n              >\n              <input\n                type="checkbox"\n                id="findMatchCase"\n                class="toolbarField"\n                tabindex="95"\n              />\n              <label\n                for="findMatchCase"\n                class="toolbarLabel"\n                data-l10n-id="find_match_case_label"\n                >Match case</label\n              >\n            </div>\n            <div id="findbarOptionsTwoContainer">\n              <input\n                type="checkbox"\n                id="findEntireWord"\n                class="toolbarField"\n                tabindex="96"\n              />\n              <label\n                for="findEntireWord"\n                class="toolbarLabel"\n                data-l10n-id="find_entire_word_label"\n                >Whole words</label\n              >\n              <span id="findResultsCount" class="toolbarLabel hidden"></span>\n            </div>\n\n            <div id="findbarMessageContainer">\n              <span id="findMsg" class="toolbarLabel"></span>\n            </div>\n          </div>\n          \x3c!-- findbar --\x3e\n\n          <div\n            id="secondaryToolbar"\n            class="secondaryToolbar hidden doorHangerRight"\n            [style.zoom]="mobileFriendlyZoom"\n            [style.top]="findbarTop"\n            [style.right]="secondaryToolbarRight"\n          >\n            <div id="secondaryToolbarButtonContainer">\n              <button\n                id="secondaryPresentationMode"\n                class="secondaryToolbarButton presentationMode visibleLargeView"\n                title="Switch to Presentation Mode"\n                tabindex="51"\n                data-l10n-id="presentation_mode"\n              >\n                <span data-l10n-id="presentation_mode_label"\n                  >Presentation Mode</span\n                >\n              </button>\n\n              <button\n                id="secondaryOpenFile"\n                class="secondaryToolbarButton openFile visibleLargeView"\n                title="Open File"\n                tabindex="52"\n                data-l10n-id="open_file"\n              >\n                <span data-l10n-id="open_file_label">Open</span>\n              </button>\n\n              <button\n                id="secondaryPrint"\n                class="secondaryToolbarButton print visibleMediumView"\n                title="Print"\n                tabindex="53"\n                data-l10n-id="print"\n              >\n                <span data-l10n-id="print_label">Print</span>\n              </button>\n\n              <button\n                id="secondaryDownload"\n                class="secondaryToolbarButton download visibleMediumView"\n                title="Download"\n                tabindex="54"\n                data-l10n-id="download"\n              >\n                <span data-l10n-id="download_label">Download</span>\n              </button>\n\n              <a\n                href="#"\n                id="secondaryViewBookmark"\n                class="secondaryToolbarButton bookmark visibleSmallView"\n                title="Current view (copy or open in new window)"\n                tabindex="55"\n                data-l10n-id="bookmark"\n              >\n                <span data-l10n-id="bookmark_label">Current View</span>\n              </a>\n\n              <div class="horizontalToolbarSeparator visibleLargeView"></div>\n\n              <button\n                [class.hidden]="!showPagingButtons"\n                id="firstPage"\n                class="secondaryToolbarButton firstPage"\n                title="Go to First Page"\n                tabindex="56"\n                data-l10n-id="first_page"\n              >\n                <span data-l10n-id="first_page_label">Go to First Page</span>\n              </button>\n              <button\n                [class.hidden]="!showPagingButtons"\n                id="lastPage"\n                class="secondaryToolbarButton lastPage"\n                title="Go to Last Page"\n                tabindex="57"\n                data-l10n-id="last_page"\n              >\n                <span data-l10n-id="last_page_label">Go to Last Page</span>\n              </button>\n\n              <div\n                [class.hidden]="!showRotateButton"\n                class="horizontalToolbarSeparator"\n              ></div>\n\n              <button\n                [class.hidden]="!showRotateButton"\n                id="pageRotateCw"\n                class="secondaryToolbarButton rotateCw"\n                title="Rotate Clockwise"\n                tabindex="58"\n                data-l10n-id="page_rotate_cw"\n              >\n                <span data-l10n-id="page_rotate_cw_label"\n                  >Rotate Clockwise</span\n                >\n              </button>\n              <button\n                [class.hidden]="!showRotateButton"\n                id="pageRotateCcw"\n                class="secondaryToolbarButton rotateCcw"\n                title="Rotate Counterclockwise"\n                tabindex="59"\n                data-l10n-id="page_rotate_ccw"\n              >\n                <span data-l10n-id="page_rotate_ccw_label"\n                  >Rotate Counterclockwise</span\n                >\n              </button>\n\n              <div class="horizontalToolbarSeparator"></div>\n\n              <button\n                [class.hidden]="!showSelectToolButton"\n                id="cursorSelectTool"\n                class="secondaryToolbarButton selectTool toggled"\n                title="Enable Text Selection Tool"\n                tabindex="60"\n                data-l10n-id="cursor_text_select_tool"\n              >\n                <span data-l10n-id="cursor_text_select_tool_label"\n                  >Text Selection Tool</span\n                >\n              </button>\n              <button\n                [class.hidden]="!showHandToolButton"\n                id="cursorHandTool"\n                class="secondaryToolbarButton handTool"\n                title="Enable Hand Tool"\n                tabindex="61"\n                data-l10n-id="cursor_hand_tool"\n              >\n                <span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>\n              </button>\n\n              <div\n                [class.hidden]="!showScrollingButton"\n                class="horizontalToolbarSeparator"\n              ></div>\n\n              <button\n                [class.hidden]="!showScrollingButton"\n                id="scrollVertical"\n                class="secondaryToolbarButton scrollVertical toggled"\n                title="Use Vertical Scrolling"\n                tabindex="62"\n                data-l10n-id="scroll_vertical"\n              >\n                <span data-l10n-id="scroll_vertical_label"\n                  >Vertical Scrolling</span\n                >\n              </button>\n              <button\n                [class.hidden]="!showScrollingButton"\n                id="scrollHorizontal"\n                class="secondaryToolbarButton scrollHorizontal"\n                title="Use Horizontal Scrolling"\n                tabindex="63"\n                data-l10n-id="scroll_horizontal"\n              >\n                <span data-l10n-id="scroll_horizontal_label"\n                  >Horizontal Scrolling</span\n                >\n              </button>\n              <button\n                [class.hidden]="!showScrollingButton"\n                id="scrollWrapped"\n                class="secondaryToolbarButton scrollWrapped"\n                title="Use Wrapped Scrolling"\n                tabindex="64"\n                data-l10n-id="scroll_wrapped"\n              >\n                <span data-l10n-id="scroll_wrapped_label"\n                  >Wrapped Scrolling</span\n                >\n              </button>\n\n              <div\n                [class.hidden]="!showSpreadButton"\n                class="horizontalToolbarSeparator"\n              ></div>\n\n              <button\n                [class.hidden]="!showSpreadButton"\n                id="spreadNone"\n                class="secondaryToolbarButton spreadNone toggled"\n                title="Do not join page spreads"\n                tabindex="65"\n                data-l10n-id="spread_none"\n                (click)="onSpreadChange(\'off\')"\n              >\n                <span data-l10n-id="spread_none_label">No Spreads</span>\n              </button>\n              <button\n                [class.hidden]="!showSpreadButton"\n                id="spreadOdd"\n                class="secondaryToolbarButton spreadOdd"\n                title="Join page spreads starting with odd-numbered pages"\n                tabindex="66"\n                data-l10n-id="spread_odd"\n                (click)="onSpreadChange(\'odd\')"\n\n              >\n                <span data-l10n-id="spread_odd_label">Odd Spreads</span>\n              </button>\n              <button\n                [class.hidden]="!showSpreadButton"\n                id="spreadEven"\n                class="secondaryToolbarButton spreadEven"\n                title="Join page spreads starting with even-numbered pages"\n                tabindex="67"\n                data-l10n-id="spread_even"\n                (click)="onSpreadChange(\'even\')"\n\n              >\n                <span data-l10n-id="spread_even_label">Even Spreads</span>\n              </button>\n\n              <div\n                [class.hidden]="!showPropertiesButton"\n                class="horizontalToolbarSeparator spreadModeButtons"\n              ></div>\n\n              <button\n                [class.hidden]="!showPropertiesButton"\n                id="documentProperties"\n                class="secondaryToolbarButton documentProperties"\n                title="Document Properties…"\n                tabindex="68"\n                data-l10n-id="document_properties"\n              >\n                <span data-l10n-id="document_properties_label"\n                  >Document Properties…</span\n                >\n              </button>\n            </div>\n          </div>\n          \x3c!-- secondaryToolbar --\x3e\n\n          <div class="toolbar" [class.hidden]="!primaryMenuVisible">\n            <div\n              id="toolbarContainer"\n              [style.zoom]="mobileFriendlyZoom"\n              [style.width]="toolbarWidth"\n            >\n              <div id="toolbarViewer">\n                <div id="toolbarViewerLeft">\n                  <button\n                    [class.hidden]="!showSidebarButton"\n                    id="sidebarToggle"\n                    class="toolbarButton"\n                    title="Toggle Sidebar"\n                    tabindex="11"\n                    data-l10n-id="toggle_sidebar"\n                  >\n                    <span data-l10n-id="toggle_sidebar_label"\n                      >Toggle Sidebar</span\n                    >\n                  </button>\n                  <div\n                    [class.hidden]="!showSidebarButton"\n                    class="toolbarButtonSpacer"\n                  ></div>\n                  <button\n                    [class.hidden]="!showFindButton"\n                    id="viewFind"\n                    class="toolbarButton"\n                    title="Find in Document"\n                    tabindex="12"\n                    data-l10n-id="findbar"\n                  >\n                    <span data-l10n-id="findbar_label">Find</span>\n                  </button>\n                  <div\n                    [class.hidden]="!showPagingButtons"\n                    class="splitToolbarButton hiddenSmallView"\n                  >\n                    <button\n                      class="toolbarButton pageUp"\n                      title="Previous Page"\n                      id="previous"\n                      tabindex="13"\n                      data-l10n-id="previous"\n                      (click)="onPageChange()"\n                    >\n                      <span data-l10n-id="previous_label">Previous</span>\n                    </button>\n                    <div class="splitToolbarButtonSeparator"></div>\n                    <button\n                      class="toolbarButton pageDown"\n                      title="Next Page"\n                      id="next"\n                      tabindex="14"\n                      data-l10n-id="next"\n                      (click)="onPageChange()"\n                    >\n                      <span data-l10n-id="next_label">Next</span>\n                    </button>\n                  </div>\n                  <input\n                    [class.hidden]="!showPagingButtons"\n                    type="number"\n                    id="pageNumber"\n                    class="toolbarField pageNumber"\n                    title="Page"\n                    value="1"\n                    size="4"\n                    min="1"\n                    tabindex="15"\n                    data-l10n-id="page"\n                    (change)="onPageChange()"\n                    (page-change)="onPageChange()"\n                  />\n                  <span\n                    [class.hidden]="!showPagingButtons"\n                    id="numPages"\n                    class="toolbarLabel"\n                  ></span>\n                </div>\n                <div id="toolbarViewerRight">\n                  <button\n                    [class.hidden]="!showPresentationModeButton"\n                    id="presentationMode"\n                    class="toolbarButton presentationMode hiddenLargeView"\n                    title="Switch to Presentation Mode"\n                    tabindex="31"\n                    data-l10n-id="presentation_mode"\n                  >\n                    <span data-l10n-id="presentation_mode_label"\n                      >Presentation Mode</span\n                    >\n                  </button>\n\n                  <button\n                    [class.hidden]="!showOpenFileButton"\n                    id="openFile"\n                    class="toolbarButton openFile hiddenLargeView"\n                    title="Open File"\n                    tabindex="32"\n                    data-l10n-id="open_file"\n                  >\n                    <span data-l10n-id="open_file_label">Open</span>\n                  </button>\n\n                  <button\n                    [class.hidden]="!showPrintButton"\n                    id="print"\n                    class="toolbarButton print hiddenMediumView"\n                    title="Print"\n                    tabindex="33"\n                    data-l10n-id="print"\n                  >\n                    <span data-l10n-id="print_label">Print</span>\n                  </button>\n\n                  <button\n                    [class.hidden]="!showDownloadButton"\n                    id="download"\n                    class="toolbarButton download hiddenMediumView"\n                    title="Download"\n                    tabindex="34"\n                    data-l10n-id="download"\n                  >\n                    <span data-l10n-id="download_label">Download</span>\n                  </button>\n                  <a\n                    href="#"\n                    [class.hidden]="!showBookmarkButton"\n                    id="viewBookmark"\n                    class="toolbarButton bookmark hiddenSmallView"\n                    title="Current view (copy or open in new window)"\n                    tabindex="35"\n                    data-l10n-id="bookmark"\n                  >\n                    <span data-l10n-id="bookmark_label">Current View</span>\n                  </a>\n\n                  <div\n                    [class.hidden]="!showSecondaryToolbarButton"\n                    class="verticalToolbarSeparator hiddenSmallView"\n                  ></div>\n\n                  <button\n                    [class.hidden]="!showSecondaryToolbarButton"\n                    id="secondaryToolbarToggle"\n                    class="toolbarButton"\n                    title="Tools"\n                    tabindex="36"\n                    data-l10n-id="tools"\n                  >\n                    <span data-l10n-id="tools_label">Tools</span>\n                  </button>\n                </div>\n                <div [class.hidden]="!showZoomButtons" id="toolbarViewerMiddle">\n                  <div class="splitToolbarButton">\n                    <button\n                      id="zoomOut"\n                      class="toolbarButton zoomOut"\n                      title="Zoom Out"\n                      tabindex="21"\n                      data-l10n-id="zoom_out"\n                      (click)="emitZoomChangeAfterDelay()"\n                    >\n                      <span data-l10n-id="zoom_out_label">Zoom Out</span>\n                    </button>\n                    <div class="splitToolbarButtonSeparator"></div>\n                    <button\n                      id="zoomIn"\n                      class="toolbarButton zoomIn"\n                      title="Zoom In"\n                      tabindex="22"\n                      data-l10n-id="zoom_in"\n                      (click)="emitZoomChangeAfterDelay()"\n                    >\n                      <span data-l10n-id="zoom_in_label">Zoom In</span>\n                    </button>\n                  </div>\n                  <span id="scaleSelectContainer" class="dropdownToolbarButton">\n                    <select\n                      id="scaleSelect"\n                      title="Zoom"\n                      tabindex="23"\n                      data-l10n-id="zoom"\n                      (change)="emitZoomChange()"\n                      #sizeSelector\n                    >\n                      <option\n                        id="pageAutoOption"\n                        title=""\n                        value="auto"\n                        selected="selected"\n                        data-l10n-id="page_scale_auto"\n                        >Automatic Zoom</option\n                      >\n                      <option\n                        id="pageActualOption"\n                        title=""\n                        value="page-actual"\n                        data-l10n-id="page_scale_actual"\n                        >Actual Size</option\n                      >\n                      <option\n                        id="pageFitOption"\n                        title=""\n                        value="page-fit"\n                        data-l10n-id="page_scale_fit"\n                        >Page Fit</option\n                      >\n                      <option\n                        id="pageWidthOption"\n                        title=""\n                        value="page-width"\n                        data-l10n-id="page_scale_width"\n                        >Page Width</option\n                      >\n                      <option\n                        id="customScaleOption"\n                        title=""\n                        value="custom"\n                        disabled="disabled"\n                        hidden="true"\n                      ></option>\n                      <option\n                        title=""\n                        value="0.5"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 50 }"\n                        >50%</option\n                      >\n                      <option\n                        title=""\n                        value="0.75"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 75 }"\n                        >75%</option\n                      >\n                      <option\n                        title=""\n                        value="1"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 100 }"\n                        >100%</option\n                      >\n                      <option\n                        title=""\n                        value="1.25"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 125 }"\n                        >125%</option\n                      >\n                      <option\n                        title=""\n                        value="1.5"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 150 }"\n                        >150%</option\n                      >\n                      <option\n                        title=""\n                        value="2"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 200 }"\n                        >200%</option\n                      >\n                      <option\n                        title=""\n                        value="3"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 300 }"\n                        >300%</option\n                      >\n                      <option\n                        title=""\n                        value="4"\n                        data-l10n-id="page_scale_percent"\n                        data-l10n-args="{ &quot;scale&quot;: 400 }"\n                        >400%</option\n                      >\n                    </select>\n                  </span>\n                </div>\n              </div>\n              <div id="loadingBar">\n                <div class="progress"><div class="glimmer"></div></div>\n              </div>\n            </div>\n          </div>\n\n          <menu\n            [class.hidden]="!showRotateButton"\n            type="context"\n            id="viewerContextMenu"\n          >\n            <menuitem\n              id="contextFirstPage"\n              label="First Page"\n              data-l10n-id="first_page"\n            >\n            </menuitem>\n            <menuitem\n              id="contextLastPage"\n              label="Last Page"\n              data-l10n-id="last_page"\n            >\n            </menuitem>\n            <menuitem\n              id="contextPageRotateCw"\n              label="Rotate Clockwise"\n              data-l10n-id="page_rotate_cw"\n            >\n            </menuitem>\n            <menuitem\n              id="contextPageRotateCcw"\n              label="Rotate Counter-Clockwise"\n              data-l10n-id="page_rotate_ccw"\n            >\n            </menuitem>\n          </menu>\n\n          <div\n            id="viewerContainer"\n            tabindex="0"\n            [style.top]="viewerPositionTop"\n          >\n            <div id="viewer" class="pdfViewer" [style.backgroundColor]="backgroundColor"></div>\n          </div>\n\n          <div id="errorWrapper" hidden="true">\n            <div id="errorMessageLeft">\n              <span id="errorMessage"></span>\n              <button id="errorShowMore" data-l10n-id="error_more_info">\n                More Information\n              </button>\n              <button\n                id="errorShowLess"\n                data-l10n-id="error_less_info"\n                hidden="true"\n              >\n                Less Information\n              </button>\n            </div>\n            <div id="errorMessageRight">\n              <button id="errorClose" data-l10n-id="error_close">Close</button>\n            </div>\n            <div class="clearBoth"></div>\n            <textarea\n              id="errorMoreInfo"\n              hidden="true"\n              readonly="readonly"\n            ></textarea>\n          </div>\n        </div>\n        \x3c!-- mainContainer --\x3e\n\n        <div id="overlayContainer" class="hidden">\n          <div id="passwordOverlay" class="container hidden">\n            <div class="dialog">\n              <div class="row">\n                <p id="passwordText" data-l10n-id="password_label">\n                  Enter the password to open this PDF file:\n                </p>\n              </div>\n              <div class="row">\n                <input type="password" id="password" class="toolbarField" />\n              </div>\n              <div class="buttonRow">\n                <button id="passwordCancel" class="overlayButton">\n                  <span data-l10n-id="password_cancel">Cancel</span>\n                </button>\n                <button id="passwordSubmit" class="overlayButton">\n                  <span data-l10n-id="password_ok">OK</span>\n                </button>\n              </div>\n            </div>\n          </div>\n          <div id="documentPropertiesOverlay" class="container hidden">\n            <div class="dialog">\n              <div class="row">\n                <span data-l10n-id="document_properties_file_name"\n                  >File name:</span\n                >\n                <p id="fileNameField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_file_size"\n                  >File size:</span\n                >\n                <p id="fileSizeField">-</p>\n              </div>\n              <div class="separator"></div>\n              <div class="row">\n                <span data-l10n-id="document_properties_title">Title:</span>\n                <p id="titleField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_author">Author:</span>\n                <p id="authorField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_subject">Subject:</span>\n                <p id="subjectField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_keywords"\n                  >Keywords:</span\n                >\n                <p id="keywordsField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_creation_date"\n                  >Creation Date:</span\n                >\n                <p id="creationDateField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_modification_date"\n                  >Modification Date:</span\n                >\n                <p id="modificationDateField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_creator">Creator:</span>\n                <p id="creatorField">-</p>\n              </div>\n              <div class="separator"></div>\n              <div class="row">\n                <span data-l10n-id="document_properties_producer"\n                  >PDF Producer:</span\n                >\n                <p id="producerField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_version"\n                  >PDF Version:</span\n                >\n                <p id="versionField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_page_count"\n                  >Page Count:</span\n                >\n                <p id="pageCountField">-</p>\n              </div>\n              <div class="row">\n                <span data-l10n-id="document_properties_page_size"\n                  >Page Size:</span\n                >\n                <p id="pageSizeField">-</p>\n              </div>\n              <div class="separator"></div>\n              <div class="row">\n                <span data-l10n-id="document_properties_linearized"\n                  >Fast Web View:</span\n                >\n                <p id="linearizedField">-</p>\n              </div>\n              <div class="buttonRow">\n                <button id="documentPropertiesClose" class="overlayButton">\n                  <span data-l10n-id="document_properties_close">Close</span>\n                </button>\n              </div>\n            </div>\n          </div>\n          \x3c!-- #if !(FIREFOX || MOZCENTRAL) --\x3e\n          <div id="printServiceOverlay" class="container hidden">\n            <div class="dialog">\n              <div class="row">\n                <span data-l10n-id="print_progress_message"\n                  >Preparing document for printing…</span\n                >\n              </div>\n              <div class="row">\n                <progress value="0" max="100"></progress>\n                <span\n                  data-l10n-id="print_progress_percent"\n                  data-l10n-args="{ &quot;progress&quot;: 0 }"\n                  class="relative-progress"\n                  >0%</span\n                >\n              </div>\n              <div class="buttonRow">\n                <button id="printCancel" class="overlayButton">\n                  <span data-l10n-id="print_progress_close">Cancel</span>\n                </button>\n              </div>\n            </div>\n          </div>\n          \x3c!-- #endif --\x3e\n          \x3c!-- #if CHROME --\x3e\n          \x3c!-- #include viewer-snippet-chrome-overlays.html --\x3e\n          \x3c!-- #endif --\x3e\n        </div>\n        \x3c!-- overlayContainer --\x3e\n      </div>\n      \x3c!-- outerContainer --\x3e\n      <div id="printContainer"></div>\n    </div>\n  </div>\n</div>\n',encapsulation:o.ViewEncapsulation.None,styles:[".textLayer{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;opacity:.2;line-height:1}.textLayer>span{color:transparent;position:absolute;white-space:pre;cursor:text;-webkit-transform-origin:0 0;transform-origin:0 0}.textLayer .highlight{margin:-1px;padding:1px;background-color:#b400aa;border-radius:4px}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:#006400}.textLayer ::-moz-selection{background:#00f}.textLayer ::selection{background:#00f}.textLayer .endOfContent{display:block;position:absolute;left:0;top:100%;right:0;bottom:0;z-index:-1;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.textLayer .endOfContent.active{top:0}.annotationLayer section{position:absolute}.annotationLayer .buttonWidgetAnnotation.pushButton>a,.annotationLayer .linkAnnotation>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer .buttonWidgetAnnotation.pushButton>a:hover,.annotationLayer .linkAnnotation>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer}.annotationLayer .buttonWidgetAnnotation.checkBox input,.annotationLayer .buttonWidgetAnnotation.radioButton input,.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .textWidgetAnnotation input,.annotationLayer .textWidgetAnnotation textarea{background-color:rgba(0,54,255,.13);border:1px solid transparent;box-siz