@aprova.ch/ngx-next-pdf-viewer 21.2.10 → 21.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -934,10 +934,10 @@ class NgxNextPdfViewerComponent {
|
|
|
934
934
|
this.cdr.detectChanges();
|
|
935
935
|
}
|
|
936
936
|
}
|
|
937
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: NgxNextPdfViewerComponent, isStandalone: true, selector: "ngx-next-pdf-viewer", inputs: { blob: "blob", annotations: "annotations", contextMenuItems: "contextMenuItems", highlightingColor: "highlightingColor", selectedColor: "selectedColor", annotationStroke: "annotationStroke", initialZoom: "initialZoom", labels: "labels", showZoom: "showZoom", showRotation: "showRotation", showPageNavigation: "showPageNavigation", showAnnotationNavigation: "showAnnotationNavigation", showSelectionMode: "showSelectionMode", showSearch: "showSearch", apiKey: "apiKey", page: "page", selectPagesEnabled: "selectPagesEnabled", selectedPages: "selectedPages" }, outputs: { boxClicked: "boxClicked", boxesSelected: "boxesSelected", pagesSelected: "pagesSelected" }, host: { listeners: { "mousemove": "onDocMouseMove($event)", "mouseup": "onDocMouseUp($event)", "document:click": "onDocClick()" } }, viewQueries: [{ propertyName: "pdfContainer", first: true, predicate: ["pdfContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"npv-root\">\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"npv-toolbar\">\n\n <!-- Zoom -->\n @if (showZoom) {\n <button mat-icon-button [matTooltip]=\"l.zoomOut\" (click)=\"zoomOut()\" [disabled]=\"zoom <= 0.25\">\n <mat-icon>zoom_out</mat-icon>\n </button>\n <span class=\"npv-label\">{{ zoomPercent }}%</span>\n <button mat-icon-button [matTooltip]=\"l.zoomIn\" (click)=\"zoomIn()\" [disabled]=\"zoom >= 5\">\n <mat-icon>zoom_in</mat-icon>\n </button>\n }\n\n <!-- Rotation -->\n @if (showRotation) {\n @if (showZoom) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.rotateLeft\" (click)=\"rotateLeft()\">\n <mat-icon>rotate_left</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"l.rotateRight\" (click)=\"rotateRight()\">\n <mat-icon>rotate_right</mat-icon>\n </button>\n }\n\n <!-- Page navigation -->\n @if (showPageNavigation) {\n @if (showZoom || showRotation) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.previousPage\" (click)=\"goToPrevPage()\" [disabled]=\"currentPage <= 1\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"npv-label\">{{ currentPage }} / {{ totalPages }}</span>\n <button mat-icon-button [matTooltip]=\"l.nextPage\" (click)=\"goToNextPage()\" [disabled]=\"currentPage >= totalPages\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n }\n\n <!-- Annotation navigation -->\n @if (showAnnotationNavigation && annotations.length) {\n @if (showZoom || showRotation || showPageNavigation) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.previousAnnotation\" (click)=\"goToPrevAnnotation()\">\n <mat-icon>navigate_before</mat-icon>\n </button>\n <span class=\"npv-label\">\n {{ annotationIndex >= 0 ? annotationIndex + 1 : '\u2013' }} / {{ annotations.length }}\n </span>\n <button mat-icon-button [matTooltip]=\"l.nextAnnotation\" (click)=\"goToNextAnnotation()\">\n <mat-icon>navigate_next</mat-icon>\n </button>\n }\n\n <!-- Selection mode toggle -->\n @if (showSelectionMode) {\n @if (showZoom || showRotation || showPageNavigation || (showAnnotationNavigation && annotations.length > 0)) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button\n [matTooltip]=\"selectionMode === 'select-area' ? l.selectText : l.selectArea\"\n (click)=\"toggleSelectionMode()\"\n [class.npv-active]=\"selectionMode === 'select-text'\">\n <mat-icon>text_fields</mat-icon>\n </button>\n }\n\n <!-- Page selection toggle -->\n @if (selectPagesEnabled) {\n @if (showZoom || showRotation || showPageNavigation || (showAnnotationNavigation && annotations.length > 0) || showSelectionMode) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button\n [matTooltip]=\"l.selectPages\"\n (click)=\"toggleSidebar()\"\n [class.npv-active]=\"sidebarOpen\">\n <mat-icon>view_sidebar</mat-icon>\n </button>\n }\n\n <!-- Search -->\n @if (showSearch) {\n @if (showZoom || showRotation || showPageNavigation || (showAnnotationNavigation && annotations.length > 0) || showSelectionMode || selectPagesEnabled) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.search\" (click)=\"toggleSearch()\" [class.npv-active]=\"searchVisible\">\n <mat-icon>search</mat-icon>\n </button>\n @if (searchVisible) {\n <input\n class=\"npv-search-input\"\n type=\"text\"\n [placeholder]=\"l.searchPlaceholder\"\n [(ngModel)]=\"searchQuery\"\n (input)=\"onSearchInput()\"\n (keydown.enter)=\"searchNext()\"\n (keydown.shift.enter)=\"searchPrev()\"\n autofocus\n />\n <button mat-icon-button [matTooltip]=\"l.previousResult\"\n (click)=\"searchPrev()\" [disabled]=\"!searchMatches.length\">\n <mat-icon>expand_less</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"l.nextResult\"\n (click)=\"searchNext()\" [disabled]=\"!searchMatches.length\">\n <mat-icon>expand_more</mat-icon>\n </button>\n @if (searchMatches.length) {\n <span class=\"npv-search-count\">\n {{ searchIndex + 1 }} / {{ searchMatches.length }}\n </span>\n }\n @if (searchQuery && !searchMatches.length) {\n <span class=\"npv-search-count npv-no-match\">\n {{ l.noResults }}\n </span>\n }\n }\n }\n\n </div>\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (loading) {\n <div class=\"npv-loading\">\n <span class=\"npv-spinner\"></span> {{ l.loading }}\n </div>\n }\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Content area (sidebar + scroll) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"npv-content-area\">\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Thumbnail sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (sidebarOpen) {\n <div class=\"npv-sidebar\">\n @for (p of pageRange(); track p) {\n <div class=\"npv-thumb-wrapper\"\n [class.npv-thumb-wrapper--selected]=\"isPageSelected(p)\"\n (click)=\"togglePageSelection(p)\">\n <canvas [id]=\"'npv-thumb-' + p\" class=\"npv-thumb-canvas\"></canvas>\n <span class=\"npv-thumb-label\">{{ p }}</span>\n </div>\n }\n </div>\n }\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Scroll area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"npv-scroll-area\" #pdfContainer\n (scroll)=\"onContainerScroll()\" (click)=\"ctxVisible = false\">\n <div class=\"npv-scroll-inner\">\n\n @for (p of pageRange(); track p) {\n <div class=\"npv-page-wrapper\" [id]=\"'npv-page-' + p\">\n <canvas [id]=\"'npv-canvas-' + p\" class=\"npv-canvas\"></canvas>\n @if (getPageInfo(p); as pi) {\n <svg\n [id]=\"'npv-svg-' + p\"\n class=\"npv-overlay\"\n [class.npv-overlay--text-mode]=\"selectionMode === 'select-text'\"\n [attr.width]=\"pi.width\" [attr.height]=\"pi.height\"\n [attr.viewBox]=\"'0 0 ' + pi.width + ' ' + pi.height\"\n (mousedown)=\"onSvgMouseDown($event, p)\">\n <!-- Hit area for drag selection on empty page space -->\n <rect x=\"0\" y=\"0\" [attr.width]=\"pi.width\" [attr.height]=\"pi.height\"\n fill=\"transparent\"></rect>\n <!-- Annotation boxes -->\n @for (box of getBoxesForPage(p); track box) {\n <polygon\n [attr.points]=\"getSvgPoints(box, pi)\"\n class=\"npv-box\"\n [class.npv-box--clicked]=\"isClicked(box)\"\n [class.npv-box--multi]=\"isMultiSelected(box)\"\n [style.fill]=\"isClicked(box) ? highlightingColor : (isMultiSelected(box) ? selectedColor : 'transparent')\"\n [style.stroke]=\"annotationStroke\"\n (click)=\"onBoxClick($event, box)\">\n <title>{{ box.content || '' }}</title>\n </polygon>\n }\n <!-- Search highlights -->\n @for (m of getSearchMatchesForPage(p); track m; let mi = $index) {\n <polygon\n [attr.points]=\"searchMatchPoints(m)\"\n class=\"npv-search-highlight\"\n [class.npv-search-highlight--current]=\"isCurrentSearchMatch(p, mi)\">\n </polygon>\n }\n <!-- Drag selection rectangle -->\n @if (getDragRect(p); as dr) {\n <rect\n [attr.x]=\"dr.x\" [attr.y]=\"dr.y\"\n [attr.width]=\"dr.w\" [attr.height]=\"dr.h\"\n class=\"npv-drag-rect\">\n </rect>\n }\n </svg>\n }\n </div>\n }\n\n @if (!loading && loadError) {\n <div class=\"npv-placeholder npv-placeholder--error\">\n {{ l.loadError }}\n </div>\n }\n @if (!loading && !loadError && totalPages === 0) {\n <div class=\"npv-placeholder\">\n {{ l.noDocument }}\n </div>\n }\n\n </div><!-- /npv-scroll-inner -->\n </div>\n\n </div><!-- /npv-content-area -->\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Context menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (ctxVisible && contextMenuItems.length) {\n <div\n class=\"npv-context-menu\"\n [style.left.px]=\"ctxX\" [style.top.px]=\"ctxY\"\n (click)=\"$event.stopPropagation()\">\n @for (item of contextMenuItems; track item) {\n <div\n class=\"npv-context-item\"\n (click)=\"onContextMenuAction(item)\">\n {{ item.label }}\n </div>\n }\n </div>\n }\n\n </div>\n", styles: [".npv-root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#e9ecee;position:relative;font-family:Roboto,sans-serif}.npv-toolbar{display:flex;align-items:center;gap:2px;padding:4px 8px;background:#fff;color:#000;height:40px;flex-shrink:0;z-index:10;box-shadow:0 2px 4px #0006}.npv-toolbar button{color:#505050}.npv-toolbar button:hover:not([disabled]){background:#0000000f}.npv-toolbar button[disabled]{opacity:.35}.npv-toolbar button.npv-active{color:#1976d2;background:#e3f0fd;box-shadow:inset 0 2px 4px #00000026}.npv-toolbar button.npv-active:hover:not([disabled]){background:#cce0fa}.npv-toolbar .npv-sep{width:1px;height:24px;background:#00000026;margin:0 4px}.npv-toolbar .npv-label{font-size:13px;min-width:50px;text-align:center;color:#505050;-webkit-user-select:none;user-select:none}.npv-toolbar .npv-search-input{background:#0000000f;border:1px solid rgba(0,0,0,.2);border-radius:4px;color:#000;font-size:13px;padding:4px 8px;outline:none;width:180px}.npv-toolbar .npv-search-input::placeholder{color:#0006}.npv-toolbar .npv-search-input:focus{border-color:#1976d2}.npv-toolbar .npv-search-count{font-size:12px;color:#607d8b;white-space:nowrap;min-width:60px}.npv-toolbar .npv-search-count.npv-no-match{color:#e53935}.npv-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;color:#666;font-size:14px;flex-shrink:0}.npv-spinner{width:20px;height:20px;border:3px solid rgba(0,0,0,.1);border-top-color:#1976d2;border-radius:50%;animation:npv-spin .8s linear infinite}@keyframes npv-spin{to{transform:rotate(360deg)}}.npv-content-area{display:flex;flex:1;overflow:hidden}.npv-sidebar{width:200px;flex-shrink:0;overflow-y:auto;background:#dcdfe2;border-right:1px solid rgba(0,0,0,.15);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:5}.npv-thumb-wrapper{display:flex;flex-direction:column;align-items:center;cursor:pointer;border:3px solid transparent;border-radius:4px;padding:4px;transition:border-color .15s ease,background .15s ease}.npv-thumb-wrapper:hover{background:#0000000f;border-color:#0003}.npv-thumb-wrapper.npv-thumb-wrapper--selected{border-color:#1976d2;background:#1976d214}.npv-thumb-wrapper.npv-thumb-wrapper--selected .npv-thumb-label{color:#1976d2;font-weight:600}.npv-thumb-canvas{max-width:150px;display:block;box-shadow:0 2px 6px #0000004d}.npv-thumb-label{margin-top:4px;font-size:12px;color:#505050;-webkit-user-select:none;user-select:none}.npv-scroll-area{flex:1;overflow:auto}.npv-scroll-inner{display:flex;flex-direction:column;align-items:center;min-width:max-content;padding:16px;gap:16px}.npv-page-wrapper{position:relative;display:inline-block;box-shadow:0 4px 12px #00000080;line-height:0}.npv-canvas{display:block}.npv-overlay{position:absolute;top:0;left:0;pointer-events:all;overflow:visible;cursor:crosshair;user-select:none;-webkit-user-select:none}.npv-overlay.npv-overlay--text-mode{pointer-events:none}.npv-box{pointer-events:all;stroke-width:2;fill:transparent;cursor:pointer;transition:fill .15s ease,stroke-width .15s ease}.npv-box:hover{stroke-width:3;filter:drop-shadow(0 0 3px rgba(233,115,50,.7))}.npv-box.npv-box--clicked{stroke-width:3}.npv-box.npv-box--multi{stroke-width:2.5}.npv-search-highlight{fill:#ffeb3b59;stroke:#ffc800cc;stroke-width:1.5;pointer-events:none}.npv-search-highlight.npv-search-highlight--current{fill:#ff980073;stroke:#ff6400e6;stroke-width:2}.npv-drag-rect{fill:#0078d71a;stroke:#0078d7b3;stroke-width:1.5;stroke-dasharray:5 3;pointer-events:none}.npv-placeholder{color:#aaa;font-size:14px;padding:40px;text-align:center}.npv-placeholder.npv-placeholder--error{color:#e53935}.npv-context-menu{position:fixed;z-index:9999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 4px 16px #0003;padding:4px 0;min-width:160px}.npv-context-item{padding:10px 16px;font-size:14px;cursor:pointer;color:#000000de;-webkit-user-select:none;user-select:none}.npv-context-item:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgxNextPdfViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: NGX_PDF_WORKER_SRC }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: NgxNextPdfViewerComponent, isStandalone: true, selector: "ngx-next-pdf-viewer", inputs: { blob: "blob", annotations: "annotations", contextMenuItems: "contextMenuItems", highlightingColor: "highlightingColor", selectedColor: "selectedColor", annotationStroke: "annotationStroke", initialZoom: "initialZoom", labels: "labels", showZoom: "showZoom", showRotation: "showRotation", showPageNavigation: "showPageNavigation", showAnnotationNavigation: "showAnnotationNavigation", showSelectionMode: "showSelectionMode", showSearch: "showSearch", apiKey: "apiKey", page: "page", selectPagesEnabled: "selectPagesEnabled", selectedPages: "selectedPages" }, outputs: { boxClicked: "boxClicked", boxesSelected: "boxesSelected", pagesSelected: "pagesSelected" }, host: { listeners: { "mousemove": "onDocMouseMove($event)", "mouseup": "onDocMouseUp($event)", "document:click": "onDocClick()" } }, viewQueries: [{ propertyName: "pdfContainer", first: true, predicate: ["pdfContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"npv-root\">\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"npv-toolbar\">\n\n <!-- Zoom -->\n @if (showZoom) {\n <button mat-icon-button [matTooltip]=\"l.zoomOut\" (click)=\"zoomOut()\" [disabled]=\"zoom <= 0.25\">\n <mat-icon>zoom_out</mat-icon>\n </button>\n <span class=\"npv-label\">{{ zoomPercent }}%</span>\n <button mat-icon-button [matTooltip]=\"l.zoomIn\" (click)=\"zoomIn()\" [disabled]=\"zoom >= 5\">\n <mat-icon>zoom_in</mat-icon>\n </button>\n }\n\n <!-- Rotation -->\n @if (showRotation) {\n @if (showZoom) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.rotateLeft\" (click)=\"rotateLeft()\">\n <mat-icon>rotate_left</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"l.rotateRight\" (click)=\"rotateRight()\">\n <mat-icon>rotate_right</mat-icon>\n </button>\n }\n\n <!-- Page navigation -->\n @if (showPageNavigation) {\n @if (showZoom || showRotation) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.previousPage\" (click)=\"goToPrevPage()\" [disabled]=\"currentPage <= 1\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"npv-label\">{{ currentPage }} / {{ totalPages }}</span>\n <button mat-icon-button [matTooltip]=\"l.nextPage\" (click)=\"goToNextPage()\" [disabled]=\"currentPage >= totalPages\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n }\n\n <!-- Annotation navigation -->\n @if (showAnnotationNavigation && annotations.length) {\n @if (showZoom || showRotation || showPageNavigation) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.previousAnnotation\" (click)=\"goToPrevAnnotation()\">\n <mat-icon>navigate_before</mat-icon>\n </button>\n <span class=\"npv-label\">\n {{ annotationIndex >= 0 ? annotationIndex + 1 : '\u2013' }} / {{ annotations.length }}\n </span>\n <button mat-icon-button [matTooltip]=\"l.nextAnnotation\" (click)=\"goToNextAnnotation()\">\n <mat-icon>navigate_next</mat-icon>\n </button>\n }\n\n <!-- Selection mode toggle -->\n @if (showSelectionMode) {\n @if (showZoom || showRotation || showPageNavigation || (showAnnotationNavigation && annotations.length > 0)) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button\n [matTooltip]=\"selectionMode === 'select-area' ? l.selectText : l.selectArea\"\n (click)=\"toggleSelectionMode()\"\n [class.npv-active]=\"selectionMode === 'select-text'\">\n <mat-icon>text_fields</mat-icon>\n </button>\n }\n\n <!-- Page selection toggle -->\n @if (selectPagesEnabled) {\n @if (showZoom || showRotation || showPageNavigation || (showAnnotationNavigation && annotations.length > 0) || showSelectionMode) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button\n [matTooltip]=\"l.selectPages\"\n (click)=\"toggleSidebar()\"\n [class.npv-active]=\"sidebarOpen\">\n <mat-icon>view_sidebar</mat-icon>\n </button>\n }\n\n <!-- Search -->\n @if (showSearch) {\n @if (showZoom || showRotation || showPageNavigation || (showAnnotationNavigation && annotations.length > 0) || showSelectionMode || selectPagesEnabled) {\n <div class=\"npv-sep\"></div>\n }\n <button mat-icon-button [matTooltip]=\"l.search\" (click)=\"toggleSearch()\" [class.npv-active]=\"searchVisible\">\n <mat-icon>search</mat-icon>\n </button>\n @if (searchVisible) {\n <input\n class=\"npv-search-input\"\n type=\"text\"\n [placeholder]=\"l.searchPlaceholder\"\n [(ngModel)]=\"searchQuery\"\n (input)=\"onSearchInput()\"\n (keydown.enter)=\"searchNext()\"\n (keydown.shift.enter)=\"searchPrev()\"\n autofocus\n />\n <button mat-icon-button [matTooltip]=\"l.previousResult\"\n (click)=\"searchPrev()\" [disabled]=\"!searchMatches.length\">\n <mat-icon>expand_less</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"l.nextResult\"\n (click)=\"searchNext()\" [disabled]=\"!searchMatches.length\">\n <mat-icon>expand_more</mat-icon>\n </button>\n @if (searchMatches.length) {\n <span class=\"npv-search-count\">\n {{ searchIndex + 1 }} / {{ searchMatches.length }}\n </span>\n }\n @if (searchQuery && !searchMatches.length) {\n <span class=\"npv-search-count npv-no-match\">\n {{ l.noResults }}\n </span>\n }\n }\n }\n\n </div>\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (loading) {\n <div class=\"npv-loading\">\n <span class=\"npv-spinner\"></span> {{ l.loading }}\n </div>\n }\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Content area (sidebar + scroll) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"npv-content-area\">\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Thumbnail sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (sidebarOpen) {\n <div class=\"npv-sidebar\">\n @for (p of pageRange(); track p) {\n <div class=\"npv-thumb-wrapper\"\n [class.npv-thumb-wrapper--selected]=\"isPageSelected(p)\"\n (click)=\"togglePageSelection(p)\">\n <canvas [id]=\"'npv-thumb-' + p\" class=\"npv-thumb-canvas\"></canvas>\n <span class=\"npv-thumb-label\">{{ p }}</span>\n </div>\n }\n </div>\n }\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Scroll area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <div class=\"npv-scroll-area\" #pdfContainer\n (scroll)=\"onContainerScroll()\" (click)=\"ctxVisible = false\">\n <div class=\"npv-scroll-inner\">\n\n @for (p of pageRange(); track p) {\n <div class=\"npv-page-wrapper\" [id]=\"'npv-page-' + p\">\n <canvas [id]=\"'npv-canvas-' + p\" class=\"npv-canvas\"></canvas>\n @if (getPageInfo(p); as pi) {\n <svg\n [id]=\"'npv-svg-' + p\"\n class=\"npv-overlay\"\n [class.npv-overlay--text-mode]=\"selectionMode === 'select-text'\"\n [attr.width]=\"pi.width\" [attr.height]=\"pi.height\"\n [attr.viewBox]=\"'0 0 ' + pi.width + ' ' + pi.height\"\n (mousedown)=\"onSvgMouseDown($event, p)\">\n <!-- Hit area for drag selection on empty page space -->\n <rect x=\"0\" y=\"0\" [attr.width]=\"pi.width\" [attr.height]=\"pi.height\"\n fill=\"transparent\"></rect>\n <!-- Annotation boxes -->\n @for (box of getBoxesForPage(p); track box) {\n <polygon\n [attr.points]=\"getSvgPoints(box, pi)\"\n class=\"npv-box\"\n [class.npv-box--clicked]=\"isClicked(box)\"\n [class.npv-box--multi]=\"isMultiSelected(box)\"\n [style.fill]=\"isClicked(box) ? highlightingColor : (isMultiSelected(box) ? selectedColor : 'transparent')\"\n [style.stroke]=\"annotationStroke\"\n (click)=\"onBoxClick($event, box)\">\n <title>{{ box.content || '' }}</title>\n </polygon>\n }\n <!-- Search highlights -->\n @for (m of getSearchMatchesForPage(p); track m; let mi = $index) {\n <polygon\n [attr.points]=\"searchMatchPoints(m)\"\n class=\"npv-search-highlight\"\n [class.npv-search-highlight--current]=\"isCurrentSearchMatch(p, mi)\">\n </polygon>\n }\n <!-- Drag selection rectangle -->\n @if (getDragRect(p); as dr) {\n <rect\n [attr.x]=\"dr.x\" [attr.y]=\"dr.y\"\n [attr.width]=\"dr.w\" [attr.height]=\"dr.h\"\n class=\"npv-drag-rect\">\n </rect>\n }\n </svg>\n }\n </div>\n }\n\n @if (!loading && loadError) {\n <div class=\"npv-placeholder npv-placeholder--error\">\n {{ l.loadError }}\n </div>\n }\n @if (!loading && !loadError && totalPages === 0) {\n <div class=\"npv-placeholder\">\n {{ l.noDocument }}\n </div>\n }\n\n </div><!-- /npv-scroll-inner -->\n </div>\n\n </div><!-- /npv-content-area -->\n\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Context menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (ctxVisible && contextMenuItems.length) {\n <div\n class=\"npv-context-menu\"\n [style.left.px]=\"ctxX\" [style.top.px]=\"ctxY\"\n (click)=\"$event.stopPropagation()\">\n @for (item of contextMenuItems; track item) {\n <div\n class=\"npv-context-item\"\n (click)=\"onContextMenuAction(item)\">\n {{ item.label }}\n </div>\n }\n </div>\n }\n\n </div>\n", styles: [".npv-root{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#e9ecee;position:relative;font-family:Roboto,sans-serif}.npv-toolbar{display:flex;align-items:center;gap:2px;padding:4px 8px;background:#fff;color:#000;height:40px;flex-shrink:0;z-index:10;box-shadow:0 2px 4px #0006}.npv-toolbar button{color:#505050}.npv-toolbar button:hover:not([disabled]){background:#0000000f}.npv-toolbar button[disabled]{opacity:.35}.npv-toolbar button.npv-active{color:#1976d2;background:#e3f0fd;box-shadow:inset 0 2px 4px #00000026}.npv-toolbar button.npv-active:hover:not([disabled]){background:#cce0fa}.npv-toolbar .npv-sep{width:1px;height:24px;background:#00000026;margin:0 4px}.npv-toolbar .npv-label{font-size:13px;min-width:50px;text-align:center;color:#505050;-webkit-user-select:none;user-select:none}.npv-toolbar .npv-search-input{background:#0000000f;border:1px solid rgba(0,0,0,.2);border-radius:4px;color:#000;font-size:13px;padding:4px 8px;outline:none;width:180px}.npv-toolbar .npv-search-input::placeholder{color:#0006}.npv-toolbar .npv-search-input:focus{border-color:#1976d2}.npv-toolbar .npv-search-count{font-size:12px;color:#607d8b;white-space:nowrap;min-width:60px}.npv-toolbar .npv-search-count.npv-no-match{color:#e53935}.npv-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;color:#666;font-size:14px;flex-shrink:0}.npv-spinner{width:20px;height:20px;border:3px solid rgba(0,0,0,.1);border-top-color:#1976d2;border-radius:50%;animation:npv-spin .8s linear infinite}@keyframes npv-spin{to{transform:rotate(360deg)}}.npv-content-area{display:flex;flex:1;overflow:hidden}.npv-sidebar{width:200px;flex-shrink:0;overflow-y:auto;background:#dcdfe2;border-right:1px solid rgba(0,0,0,.15);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:5}.npv-thumb-wrapper{display:flex;flex-direction:column;align-items:center;cursor:pointer;border:3px solid transparent;border-radius:4px;padding:4px;transition:border-color .15s ease,background .15s ease}.npv-thumb-wrapper:hover{background:#0000000f;border-color:#0003}.npv-thumb-wrapper.npv-thumb-wrapper--selected{border-color:#1976d2;background:#1976d214}.npv-thumb-wrapper.npv-thumb-wrapper--selected .npv-thumb-label{color:#1976d2;font-weight:600}.npv-thumb-canvas{max-width:150px;display:block;box-shadow:0 2px 6px #0000004d}.npv-thumb-label{margin-top:4px;font-size:12px;color:#505050;-webkit-user-select:none;user-select:none}.npv-scroll-area{flex:1;overflow:auto}.npv-scroll-inner{display:flex;flex-direction:column;align-items:center;min-width:max-content;padding:16px;gap:16px}.npv-page-wrapper{position:relative;display:inline-block;box-shadow:0 4px 12px #00000080;line-height:0}.npv-canvas{display:block}.npv-overlay{position:absolute;top:0;left:0;pointer-events:all;overflow:visible;cursor:crosshair;user-select:none;-webkit-user-select:none}.npv-overlay.npv-overlay--text-mode{pointer-events:none}.npv-box{pointer-events:all;stroke-width:2;fill:transparent;cursor:pointer;transition:fill .15s ease,stroke-width .15s ease}.npv-box:hover{stroke-width:3;filter:drop-shadow(0 0 3px rgba(233,115,50,.7))}.npv-box.npv-box--clicked{stroke-width:3}.npv-box.npv-box--multi{stroke-width:2.5}.npv-search-highlight{fill:#ffeb3b59;stroke:#ffc800cc;stroke-width:1.5;pointer-events:none}.npv-search-highlight.npv-search-highlight--current{fill:#ff980073;stroke:#ff6400e6;stroke-width:2}.npv-drag-rect{fill:#0078d71a;stroke:#0078d7b3;stroke-width:1.5;stroke-dasharray:5 3;pointer-events:none}.npv-placeholder{color:#aaa;font-size:14px;padding:40px;text-align:center}.npv-placeholder.npv-placeholder--error{color:#e53935}.npv-context-menu{position:fixed;z-index:9999;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 4px 16px #0003;padding:4px 0;min-width:160px}.npv-context-item{padding:10px 16px;font-size:14px;cursor:pointer;color:#000000de;-webkit-user-select:none;user-select:none}.npv-context-item:hover{background:#0000000d}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
939
939
|
}
|
|
940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: NgxNextPdfViewerComponent, decorators: [{
|
|
941
941
|
type: Component,
|
|
942
942
|
args: [{ selector: 'ngx-next-pdf-viewer', standalone: true, imports: [
|
|
943
943
|
FormsModule,
|