ngx-extended-pdf-viewer
Version:
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.
50 lines • 13.7 kB
JavaScript
import { Component, Input, effect } from '@angular/core';
import { PositioningService } from '../../dynamic-css/positioning.service';
import { AnnotationEditorType } from '../../options/editor-annotations';
import * as i0 from "@angular/core";
import * as i1 from "../../pdf-notification-service";
import * as i2 from "../pdf-shy-button/pdf-shy-button.component";
import * as i3 from "../../responsive-visibility";
export class PdfCommentEditorComponent {
cdr;
show = true;
isSelected = false;
PDFViewerApplication;
constructor(notificationService, cdr) {
this.cdr = cdr;
effect(() => {
this.PDFViewerApplication = notificationService.onPDFJSInitSignal();
if (this.PDFViewerApplication) {
this.onPdfJsInit();
}
});
}
onPdfJsInit() {
this.PDFViewerApplication?.eventBus.on('annotationeditormodechanged', ({ mode }) => {
setTimeout(() => {
this.isSelected = mode === AnnotationEditorType.POPUP;
this.cdr.detectChanges();
});
});
}
onClick(event) {
const currentMode = this.PDFViewerApplication?.pdfViewer.annotationEditorMode;
this.PDFViewerApplication?.eventBus.dispatch('switchannotationeditormode', {
source: this,
mode: currentMode === AnnotationEditorType.POPUP ? AnnotationEditorType.NONE : AnnotationEditorType.POPUP,
isFromKeyboard: event.detail === 0,
});
// Position the comment sidebar
const positioningService = new PositioningService();
positioningService.positionPopupBelowItsButton('editorCommentButton', 'editorCommentParamsToolbar');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PdfCommentEditorComponent, deps: [{ token: i1.PDFNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PdfCommentEditorComponent, selector: "pdf-comment-editor", inputs: { show: "show" }, ngImport: i0, template: "<pdf-shy-button\n title=\"Comment\"\n primaryToolbarId=\"editorCommentButton\"\n [cssClass]=\"show | responsiveCSSClass : 'hiddenTinyView'\"\n l10nId=\"pdfjs-editor-comment-button\"\n l10nLabel=\"pdfjs-editor-comment-button-label\"\n [order]=\"3900\"\n [action]=\"onClick\"\n [toggled]=\"isSelected\"\n [closeOnClick]=\"false\"\n image=\"<svg aria-hidden='true' focusable='false' width='20px' height='20px' viewBox='0 0 24 24'> <path fill='currentColor' d='M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10Z' /> </svg>\"\n>\n</pdf-shy-button>", styles: ["#editorCommentButton:before{-webkit-mask-image:var(--toolbarButton-editorComment-icon);mask-image:var(--toolbarButton-editorComment-icon);transform:scaleX(var(--dir-factor))}#editorCommentsSidebar{--comment-sidebar-bg: light-dark(#fff, #23222b);--comment-sidebar-border: light-dark( rgb(21 20 26 / .1), rgb(251 251 254 / .1) );--comment-sidebar-text: light-dark(#15141a, #fbfbfe);--comment-sidebar-header-bg: light-dark(#f0f0f4, #2b2a33);--comment-button-hover-bg: light-dark(#e0e0e6, #52525e);background-color:var(--comment-sidebar-bg);border:1px solid var(--comment-sidebar-border);color:var(--comment-sidebar-text)}#editorCommentsSidebarHeader{background-color:var(--comment-sidebar-header-bg);padding:12px 16px;border-bottom:1px solid var(--comment-sidebar-border);display:flex;justify-content:space-between;align-items:center}#editorCommentsSidebarTitle{font-weight:600;font-size:13px}#editorCommentsSidebarCount{font-weight:400;margin-left:4px;color:var(--comment-sidebar-text);opacity:.7}#editorCommentsSidebarCloseButton{background:none;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;color:var(--comment-sidebar-text);font-size:12px}#editorCommentsSidebarCloseButton:hover{background-color:var(--comment-button-hover-bg)}#editorCommentsSidebarList{list-style:none;margin:0;padding:0;max-height:400px;overflow-y:auto}.commentCount{display:flex;align-items:center}@media screen and (forced-colors: active){#editorCommentsSidebar{--comment-sidebar-bg: Canvas;--comment-sidebar-border: CanvasText;--comment-sidebar-text: CanvasText;--comment-sidebar-header-bg: Canvas;--comment-button-hover-bg: Highlight}}\n"], dependencies: [{ kind: "component", type: i2.PdfShyButtonComponent, selector: "pdf-shy-button", inputs: ["primaryToolbarId", "secondaryMenuId", "cssClass", "eventBusName", "l10nId", "l10nLabel", "title", "toggled", "disabled", "order", "action", "closeOnClick", "onlySecondaryMenu", "image"] }, { kind: "pipe", type: i3.ResponsiveCSSClassPipe, name: "responsiveCSSClass" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PdfCommentEditorComponent, decorators: [{
type: Component,
args: [{ selector: 'pdf-comment-editor', template: "<pdf-shy-button\n title=\"Comment\"\n primaryToolbarId=\"editorCommentButton\"\n [cssClass]=\"show | responsiveCSSClass : 'hiddenTinyView'\"\n l10nId=\"pdfjs-editor-comment-button\"\n l10nLabel=\"pdfjs-editor-comment-button-label\"\n [order]=\"3900\"\n [action]=\"onClick\"\n [toggled]=\"isSelected\"\n [closeOnClick]=\"false\"\n image=\"<svg aria-hidden='true' focusable='false' width='20px' height='20px' viewBox='0 0 24 24'> <path fill='currentColor' d='M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10Z' /> </svg>\"\n>\n</pdf-shy-button>", styles: ["#editorCommentButton:before{-webkit-mask-image:var(--toolbarButton-editorComment-icon);mask-image:var(--toolbarButton-editorComment-icon);transform:scaleX(var(--dir-factor))}#editorCommentsSidebar{--comment-sidebar-bg: light-dark(#fff, #23222b);--comment-sidebar-border: light-dark( rgb(21 20 26 / .1), rgb(251 251 254 / .1) );--comment-sidebar-text: light-dark(#15141a, #fbfbfe);--comment-sidebar-header-bg: light-dark(#f0f0f4, #2b2a33);--comment-button-hover-bg: light-dark(#e0e0e6, #52525e);background-color:var(--comment-sidebar-bg);border:1px solid var(--comment-sidebar-border);color:var(--comment-sidebar-text)}#editorCommentsSidebarHeader{background-color:var(--comment-sidebar-header-bg);padding:12px 16px;border-bottom:1px solid var(--comment-sidebar-border);display:flex;justify-content:space-between;align-items:center}#editorCommentsSidebarTitle{font-weight:600;font-size:13px}#editorCommentsSidebarCount{font-weight:400;margin-left:4px;color:var(--comment-sidebar-text);opacity:.7}#editorCommentsSidebarCloseButton{background:none;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;color:var(--comment-sidebar-text);font-size:12px}#editorCommentsSidebarCloseButton:hover{background-color:var(--comment-button-hover-bg)}#editorCommentsSidebarList{list-style:none;margin:0;padding:0;max-height:400px;overflow-y:auto}.commentCount{display:flex;align-items:center}@media screen and (forced-colors: active){#editorCommentsSidebar{--comment-sidebar-bg: Canvas;--comment-sidebar-border: CanvasText;--comment-sidebar-text: CanvasText;--comment-sidebar-header-bg: Canvas;--comment-button-hover-bg: Highlight}}\n"] }]
}], ctorParameters: () => [{ type: i1.PDFNotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { show: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGRmLWNvbW1lbnQtZWRpdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1leHRlbmRlZC1wZGYtdmlld2VyL3NyYy9saWIvdG9vbGJhci9wZGYtY29tbWVudC1lZGl0b3IvcGRmLWNvbW1lbnQtZWRpdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1leHRlbmRlZC1wZGYtdmlld2VyL3NyYy9saWIvdG9vbGJhci9wZGYtY29tbWVudC1lZGl0b3IvcGRmLWNvbW1lbnQtZWRpdG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBcUIsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFFM0UsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7O0FBVXhFLE1BQU0sT0FBTyx5QkFBeUI7SUFTMUI7SUFQSCxJQUFJLEdBQXlCLElBQUksQ0FBQztJQUVsQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQ2xCLG9CQUFvQixDQUFvQztJQUVoRSxZQUNFLG1CQUEyQyxFQUNuQyxHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUU5QixNQUFNLENBQUMsR0FBRyxFQUFFO1lBQ1YsSUFBSSxDQUFDLG9CQUFvQixHQUFHLG1CQUFtQixDQUFDLGlCQUFpQixFQUFFLENBQUM7WUFDcEUsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7Z0JBQzdCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQzthQUNwQjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLFdBQVc7UUFDakIsSUFBSSxDQUFDLG9CQUFvQixFQUFFLFFBQVEsQ0FBQyxFQUFFLENBQUMsNkJBQTZCLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBMEMsRUFBRSxFQUFFO1lBQ3pILFVBQVUsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2QsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLEtBQUssb0JBQW9CLENBQUMsS0FBSyxDQUFDO2dCQUN0RCxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQzNCLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRU0sT0FBTyxDQUFDLEtBQW1CO1FBQ2hDLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxTQUFTLENBQUMsb0JBQW9CLENBQUM7UUFDOUUsSUFBSSxDQUFDLG9CQUFvQixFQUFFLFFBQVEsQ0FBQyxRQUFRLENBQUMsNEJBQTRCLEVBQUU7WUFDekUsTUFBTSxFQUFFLElBQUk7WUFDWixJQUFJLEVBQUUsV0FBVyxLQUFLLG9CQUFvQixDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQyxLQUFLO1lBQ3pHLGNBQWMsRUFBRSxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUM7U0FDbkMsQ0FBQyxDQUFDO1FBRUgsK0JBQStCO1FBQy9CLE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxrQkFBa0IsRUFBRSxDQUFDO1FBQ3BELGtCQUFrQixDQUFDLDJCQUEyQixDQUFDLHFCQUFxQixFQUFFLDRCQUE0QixDQUFDLENBQUM7SUFDdEcsQ0FBQzt3R0F2Q1UseUJBQXlCOzRGQUF6Qix5QkFBeUIsb0ZDYnRDLHVxQkFZaUI7OzRGRENKLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDRSxvQkFBb0I7MkhBTXZCLElBQUk7c0JBRFYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIElucHV0LCBlZmZlY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFBvc2l0aW9uaW5nU2VydmljZSB9IGZyb20gJy4uLy4uL2R5bmFtaWMtY3NzL3Bvc2l0aW9uaW5nLnNlcnZpY2UnO1xuaW1wb3J0IHsgQW5ub3RhdGlvbkVkaXRvckVkaXRvck1vZGVDaGFuZ2VkRXZlbnQgfSBmcm9tICcuLi8uLi9ldmVudHMvYW5ub3RhdGlvbi1lZGl0b3ItbW9kZS1jaGFuZ2VkLWV2ZW50JztcbmltcG9ydCB7IEFubm90YXRpb25FZGl0b3JUeXBlIH0gZnJvbSAnLi4vLi4vb3B0aW9ucy9lZGl0b3ItYW5ub3RhdGlvbnMnO1xuaW1wb3J0IHsgSVBERlZpZXdlckFwcGxpY2F0aW9uIH0gZnJvbSAnLi4vLi4vb3B0aW9ucy9wZGYtdmlld2VyLWFwcGxpY2F0aW9uJztcbmltcG9ydCB7IFBERk5vdGlmaWNhdGlvblNlcnZpY2UgfSBmcm9tICcuLi8uLi9wZGYtbm90aWZpY2F0aW9uLXNlcnZpY2UnO1xuaW1wb3J0IHsgUmVzcG9uc2l2ZVZpc2liaWxpdHkgfSBmcm9tICcuLi8uLi9yZXNwb25zaXZlLXZpc2liaWxpdHknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdwZGYtY29tbWVudC1lZGl0b3InLFxuICB0ZW1wbGF0ZVVybDogJy4vcGRmLWNvbW1lbnQtZWRpdG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGRmLWNvbW1lbnQtZWRpdG9yLmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgUGRmQ29tbWVudEVkaXRvckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzaG93OiBSZXNwb25zaXZlVmlzaWJpbGl0eSA9IHRydWU7XG5cbiAgcHVibGljIGlzU2VsZWN0ZWQgPSBmYWxzZTtcbiAgcHJpdmF0ZSBQREZWaWV3ZXJBcHBsaWNhdGlvbjogSVBERlZpZXdlckFwcGxpY2F0aW9uIHwgdW5kZWZpbmVkO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIG5vdGlmaWNhdGlvblNlcnZpY2U6IFBERk5vdGlmaWNhdGlvblNlcnZpY2UsXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICApIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgdGhpcy5QREZWaWV3ZXJBcHBsaWNhdGlvbiA9IG5vdGlmaWNhdGlvblNlcnZpY2Uub25QREZKU0luaXRTaWduYWwoKTtcbiAgICAgIGlmICh0aGlzLlBERlZpZXdlckFwcGxpY2F0aW9uKSB7XG4gICAgICAgIHRoaXMub25QZGZKc0luaXQoKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgb25QZGZKc0luaXQoKSB7XG4gICAgdGhpcy5QREZWaWV3ZXJBcHBsaWNhdGlvbj8uZXZlbnRCdXMub24oJ2Fubm90YXRpb25lZGl0b3Jtb2RlY2hhbmdlZCcsICh7IG1vZGUgfTogQW5ub3RhdGlvbkVkaXRvckVkaXRvck1vZGVDaGFuZ2VkRXZlbnQpID0+IHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICB0aGlzLmlzU2VsZWN0ZWQgPSBtb2RlID09PSBBbm5vdGF0aW9uRWRpdG9yVHlwZS5QT1BVUDtcbiAgICAgICAgdGhpcy5jZHIuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgfSk7XG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgb25DbGljayhldmVudDogUG9pbnRlckV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgY3VycmVudE1vZGUgPSB0aGlzLlBERlZpZXdlckFwcGxpY2F0aW9uPy5wZGZWaWV3ZXIuYW5ub3RhdGlvbkVkaXRvck1vZGU7XG4gICAgdGhpcy5QREZWaWV3ZXJBcHBsaWNhdGlvbj8uZXZlbnRCdXMuZGlzcGF0Y2goJ3N3aXRjaGFubm90YXRpb25lZGl0b3Jtb2RlJywge1xuICAgICAgc291cmNlOiB0aGlzLFxuICAgICAgbW9kZTogY3VycmVudE1vZGUgPT09IEFubm90YXRpb25FZGl0b3JUeXBlLlBPUFVQID8gQW5ub3RhdGlvbkVkaXRvclR5cGUuTk9ORSA6IEFubm90YXRpb25FZGl0b3JUeXBlLlBPUFVQLFxuICAgICAgaXNGcm9tS2V5Ym9hcmQ6IGV2ZW50LmRldGFpbCA9PT0gMCxcbiAgICB9KTtcblxuICAgIC8vIFBvc2l0aW9uIHRoZSBjb21tZW50IHNpZGViYXJcbiAgICBjb25zdCBwb3NpdGlvbmluZ1NlcnZpY2UgPSBuZXcgUG9zaXRpb25pbmdTZXJ2aWNlKCk7XG4gICAgcG9zaXRpb25pbmdTZXJ2aWNlLnBvc2l0aW9uUG9wdXBCZWxvd0l0c0J1dHRvbignZWRpdG9yQ29tbWVudEJ1dHRvbicsICdlZGl0b3JDb21tZW50UGFyYW1zVG9vbGJhcicpO1xuICB9XG59XG4iLCI8cGRmLXNoeS1idXR0b25cbiAgdGl0bGU9XCJDb21tZW50XCJcbiAgcHJpbWFyeVRvb2xiYXJJZD1cImVkaXRvckNvbW1lbnRCdXR0b25cIlxuICBbY3NzQ2xhc3NdPVwic2hvdyB8IHJlc3BvbnNpdmVDU1NDbGFzcyA6ICdoaWRkZW5UaW55VmlldydcIlxuICBsMTBuSWQ9XCJwZGZqcy1lZGl0b3ItY29tbWVudC1idXR0b25cIlxuICBsMTBuTGFiZWw9XCJwZGZqcy1lZGl0b3ItY29tbWVudC1idXR0b24tbGFiZWxcIlxuICBbb3JkZXJdPVwiMzkwMFwiXG4gIFthY3Rpb25dPVwib25DbGlja1wiXG4gIFt0b2dnbGVkXT1cImlzU2VsZWN0ZWRcIlxuICBbY2xvc2VPbkNsaWNrXT1cImZhbHNlXCJcbiAgaW1hZ2U9XCI8c3ZnIGFyaWEtaGlkZGVuPSd0cnVlJyBmb2N1c2FibGU9J2ZhbHNlJyB3aWR0aD0nMjBweCcgaGVpZ2h0PScyMHB4JyB2aWV3Qm94PScwIDAgMjQgMjQnPiA8cGF0aCBmaWxsPSdjdXJyZW50Q29sb3InIGQ9J005LDIyQTEsMSAwIDAsMSA4LDIxVjE4SDRBMiwyIDAgMCwxIDIsMTZWNEMyLDIuODkgMi45LDIgNCwySDIwQTIsMiAwIDAsMSAyMiw0VjE2QTIsMiAwIDAsMSAyMCwxOEgxMy45TDEwLjIsMjEuNzFDMTAsMjEuOSA5Ljc1LDIyIDkuNSwyMlYyMkg5TTEwLDE2VjE5LjA4TDEzLjA4LDE2SDIwVjRINFYxNkgxMFonIC8+IDwvc3ZnPlwiXG4+XG48L3BkZi1zaHktYnV0dG9uPiJdfQ==