@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js

@@ -0,0 +1,720 @@
+import { h, Host, } from "@stencil/core";
+import A11yDialog from "a11y-dialog";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import classnames from "classnames";
+import { isMobileViewport, querySelectorAllDeep } from "../../utils";
+export class SwirlPdfReader {
+    constructor() {
+        this.autoZoomLabel = "Full width";
+        this.closeButtonLabel = "Close PDF viewer";
+        this.downloadButtonEnabled = true;
+        this.downloadButtonLabel = "Download PDF";
+        this.fileTypeLabel = "PDF Document";
+        this.menuLabel = "File menu";
+        this.menuTriggerLabel = "Open file menu";
+        this.printButtonEnabled = true;
+        this.printButtonLabel = "Print PDF";
+        this.sideBySideButtonLabel = "Toggle side by side view";
+        this.thumbnailButtonLabel = "Scroll to page";
+        this.thumbnailsButtonLabel = "Toggle thumbnails";
+        this.thumbnailsLabel = "Page thumbnails";
+        this.zoomInButtonLabel = "Zoom in";
+        this.zoomOutButtonLabel = "Zoom out";
+        this.zoomSelectLabel = "Select zoom";
+        this.skipNativeDownload = false;
+        this.active = false;
+        this.closing = false;
+        this.downloading = false;
+        this.loadingThumbnails = false;
+        this.thumbnails = [];
+        this.viewMode = "single";
+        this.visiblePages = [];
+        this.desktopZoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
+        this.mobileZoomSteps = [0.5, 0.75, 1, 1.25, 1.5];
+        this.toggleViewMode = () => {
+            if (this.viewMode === "single") {
+                this.viewMode = "side-by-side";
+            }
+            else {
+                this.viewMode = "single";
+            }
+        };
+        this.toggleThumbnals = () => {
+            this.showThumbnails = !this.showThumbnails;
+        };
+        this.onKeyDown = (event) => {
+            if (event.code === "Escape") {
+                event.stopImmediatePropagation();
+                this.close();
+            }
+        };
+        this.onActivate = async (event) => {
+            this.pdfViewer = event.detail;
+            this.lockBodyScroll();
+        };
+        this.onVisiblePagesChange = async (event) => {
+            this.visiblePages = event.detail;
+        };
+        this.onCloseButtonClick = () => {
+            this.close();
+        };
+        this.onPrintButtonClick = () => {
+            this.pdfViewer.print();
+            this.menu.close();
+        };
+        this.onDownloadButtonClick = async () => {
+            this.downloading = true;
+            await this.viewer.download();
+            this.downloading = false;
+            this.menu.close();
+        };
+        this.onZoomInButtonClick = () => {
+            const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
+            this.zoom =
+                currentZoomStepIndex === -1
+                    ? 1
+                    : this.zoomSteps[Math.min(this.zoomSteps.length - 1, currentZoomStepIndex + 1)];
+        };
+        this.onZoomOutButtonClick = () => {
+            const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
+            this.zoom =
+                currentZoomStepIndex === -1
+                    ? 1
+                    : this.zoomSteps[Math.max(0, currentZoomStepIndex - 1)];
+        };
+        this.onZoomAutoButtonClick = () => {
+            this.zoom = this.zoom === "auto" ? 1 : "auto";
+        };
+        this.onZoomChange = (event) => {
+            const value = event.target.value;
+            this.zoom = value === "auto" ? value : +value;
+        };
+        this.onThumbnailClick = (index) => () => {
+            const page = querySelectorAllDeep(this.el, `[data-page-number="${index + 1}"]`)?.[0];
+            page?.scrollIntoView();
+        };
+    }
+    componentWillLoad() {
+        this.updateZoomSteps();
+        this.zoom = isMobileViewport() ? "auto" : 1;
+    }
+    componentDidLoad() {
+        this.modal = new A11yDialog(this.modalEl);
+    }
+    disconnectedCallback() {
+        this.unlockBodyScroll();
+        this.modal?.destroy();
+    }
+    onWindowResize() {
+        if (!Boolean(this.pdfViewer)) {
+            return;
+        }
+        this.updateZoomSteps();
+        this.zoom = isMobileViewport() ? "auto" : 1;
+    }
+    watchShowThumbnails() {
+        if (this.showThumbnails) {
+            this.loadingThumbnails = true;
+            queueMicrotask(async () => {
+                await this.generateThumbnails();
+                this.loadingThumbnails = false;
+            });
+        }
+    }
+    /**
+     * Open the reader.
+     */
+    async open() {
+        this.modal.show();
+        this.active = true;
+        this.modalOpen.emit();
+    }
+    /**
+     * Close the reader.
+     */
+    async close() {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
+        this.unlockBodyScroll();
+        setTimeout(() => {
+            this.modal.hide();
+            this.closing = false;
+            this.active = false;
+            this.modalClose.emit();
+        }, 150);
+    }
+    lockBodyScroll() {
+        const scrollContainer = this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");
+        if (Boolean(scrollContainer)) {
+            disableBodyScroll(scrollContainer);
+        }
+    }
+    unlockBodyScroll() {
+        const scrollContainer = this.pdfViewer?.shadowRoot.querySelector(".file-viewer-pdf__pages");
+        if (Boolean(scrollContainer)) {
+            enableBodyScroll(scrollContainer);
+        }
+    }
+    async generateThumbnails() {
+        this.thumbnails = await this.pdfViewer.getThumbnails();
+    }
+    updateZoomSteps() {
+        this.zoomSteps = isMobileViewport()
+            ? this.mobileZoomSteps
+            : this.desktopZoomSteps;
+    }
+    render() {
+        const hasMenuItems = Boolean(this.el.querySelector("[slot='menu-items']")) ||
+            this.printButtonEnabled ||
+            this.downloadButtonEnabled;
+        const className = classnames("pdf-reader", {
+            "pdf-reader--closing": this.closing,
+            "pdf-reader--hide-menu": !hasMenuItems,
+            "pdf-reader--show-thumbnails": this.showThumbnails,
+        });
+        return (h(Host, { key: '19197ad170a4977445488f04d9ff69bec126b33f' }, h("section", { key: '9013ee2e9fcd80046e5f12cab4a1aed7b158f2f0', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '62e1d49cd650c7d8e9e75a287f1c90bc0d94794b', class: "pdf-reader__body", role: "document" }, h("header", { key: '50f2d0fbf5ddaf9f55965b06c032a77de9f54dc4', class: "pdf-reader__header" }, h("span", { key: '117e182ad512ba3122e7cac9c5f7323037fe6b38', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'bcafbf6f7395b4bddd700c8397820d04c57aedf3', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: '129784610c98dd1739e6980de7126a189deeadf9', class: "pdf-reader__label" }, this.label)), h("span", { key: '83fb2e648321394c6347e89da3fe7776c5d4f22a', class: "pdf-reader__header-center" }, h("span", { key: '42037dfbce56a6c0b9302809a6527c6c254f61e9', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '1dd658b159ec95d9f100159c115c8f93c564136e', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: 'd1670919a03d1ee2469f8ac90b12550ddebe1f9f', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: '91b1eeb4e84a5ae68d8a5fba4cbdc4663e3a60f1', class: "pdf-reader__zoom-select-container" }, h("select", { key: '0c54ce52a527ad2ab83150757ed635f4e91ac007', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '3bb64f2a953297dd59e7f73aeb398b42f58018e4', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: 'c3a813292cac9b780d656c3a13773cde1961326b', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '502fd45bde7683cf294e4d569f1f573f538dc861', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: 'd9897e63952272e0fc317100a83812a06fa2c2bd', swirlPopover: this.menu }, h("swirl-button", { key: 'dcd26fe2c7bfc04eea4ffaeacbf629b8ec7fff57', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '7f2e6b68cb07868416acba602a7dc581885638b3', class: "pdf-reader__floating-tools" }, h("button", { key: 'e02e46800b031ac11ddf6c07023fc50d0ad95fdb', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: 'd252652c7e403571159cfb7f2eee8a96e11a1ddf' })), h("button", { key: '4cb1d8e3733f7ec4419809e0580572a8b1732dd3', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'be03421014b1a85a2a843326a83811154331b965' })))), h("div", { key: 'f781c2470b47219be2e17c9afa74c5258e06a5a7', class: "pdf-reader__content" }, h("nav", { key: '5b76f5214afd87f03e6d3cab70f3f7c974acf7c1', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: 'f67428ad229e980d11bcf706ae076aa4a7f43826' }), !this.loadingThumbnails &&
+            this.thumbnails.map((thumbnail, index) => {
+                const thumbnailClassName = classnames("pdf-reader__thumbnail", {
+                    "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
+                });
+                return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
+            })), h("swirl-file-viewer", { key: 'f9f5a7fee331ba593b7c9e30a44b40ca695005c0', active: this.active, class: "pdf-reader__viewer", disablePrint: !this.printButtonEnabled, file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom, skipNativeDownload: this.skipNativeDownload }), h("div", { key: 'eb237b892724fd18a7d06d3b0865e1f1e29885a3', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'a4efc0fa3d4433dd2ca8206299f704fe48ba4f27', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: '7bfedaf1c61525438b4e947693f698c5898192ce', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '6b169bd2f4a44bba431c3bbd98fefc8814c91f99' })), h("button", { key: '2e82de1b32043125751746e23acd8470f5efac73', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '39ba9433ca8fc75cd06ee64985495e661f5c66a5' }))))), h("swirl-popover", { key: '112919c92cd9a0663bb51251f2fd9a980f0948fc', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '1ea1fafc9751f8eefdbcbfd0d99fd28fb1dfd877' }, h("div", { key: '98bbbb91407a285d47735c429aeb825e38036941', class: "pdf-reader__meta" }, h("div", { key: 'aa8c65e91207da7fd243b651385466845d82911d', class: "pdf-reader__file-icon" }, h("svg", { key: 'bf2dd920fd890ec8ca976ce736c4769d05e4cfdf', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '41c131ae46f78603d35ad1c45d155e8970a4f9cc', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'da0d51646e5251c7e632e927831e0d52e4ac43ef', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '4d7faead8099dc6cb1d6acf7a895ad480133d00d', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'ca260c197627e6361fcb2cdc9fc0fe0e2af7fbd1', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '833fbd0a95815dd0283623b5dd6ca140ac3e8a7e', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: 'a8bb17c1c8b9702f0c78a25ce899d2da420bb4de', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '81ce9127006227e2c5a0066697e531a23758ca03', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '7938a5398cebe4616c098a4c6f7e62c44ffe18f8', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '24cd34da658c338ad809958420ac2030eec5ddd5', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'd5c5a81aa406b73884cfbb71d714b1002ff9e6c6', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '5c33638c47381f23695a675b69790c021d0f85f1', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '11ec84136f2c480b20a6f41332abd4ae99d7968a' }), h("swirl-action-list", { key: 'e178a238c62434f2268bab84ff8e030bdf756953', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: 'fd111c34e9e522772a87ccd2de21fd7ddb3fd946', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '8cafd6f230062f04914cf0b7605340e4db0bb0bf', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+                ? "<swirl-icon-download></swirl-icon-download>"
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '7be9492329174f5d1fefaff224f5c2e7c91b0100', name: "menu-items" })))))));
+    }
+    static get is() { return "swirl-pdf-reader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-pdf-reader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-pdf-reader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoZoomLabel": {
+                "type": "string",
+                "attribute": "auto-zoom-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Full width\""
+            },
+            "closeButtonLabel": {
+                "type": "string",
+                "attribute": "close-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Close PDF viewer\""
+            },
+            "downloadButtonEnabled": {
+                "type": "boolean",
+                "attribute": "download-button-enabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "downloadButtonLabel": {
+                "type": "string",
+                "attribute": "download-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Download PDF\""
+            },
+            "file": {
+                "type": "string",
+                "attribute": "file",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fileName": {
+                "type": "string",
+                "attribute": "file-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "fileTypeLabel": {
+                "type": "string",
+                "attribute": "file-type-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"PDF Document\""
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "menuLabel": {
+                "type": "string",
+                "attribute": "menu-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"File menu\""
+            },
+            "menuTriggerLabel": {
+                "type": "string",
+                "attribute": "menu-trigger-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Open file menu\""
+            },
+            "pdfWorkerSrc": {
+                "type": "string",
+                "attribute": "pdf-worker-src",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "printButtonEnabled": {
+                "type": "boolean",
+                "attribute": "print-button-enabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "printButtonLabel": {
+                "type": "string",
+                "attribute": "print-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Print PDF\""
+            },
+            "sideBySideButtonLabel": {
+                "type": "string",
+                "attribute": "side-by-side-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Toggle side by side view\""
+            },
+            "thumbnailButtonLabel": {
+                "type": "string",
+                "attribute": "thumbnail-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Scroll to page\""
+            },
+            "thumbnailsButtonLabel": {
+                "type": "string",
+                "attribute": "thumbnails-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Toggle thumbnails\""
+            },
+            "thumbnailsLabel": {
+                "type": "string",
+                "attribute": "thumbnails-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Page thumbnails\""
+            },
+            "zoomInButtonLabel": {
+                "type": "string",
+                "attribute": "zoom-in-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Zoom in\""
+            },
+            "zoomOutButtonLabel": {
+                "type": "string",
+                "attribute": "zoom-out-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Zoom out\""
+            },
+            "zoomSelectLabel": {
+                "type": "string",
+                "attribute": "zoom-select-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"Select zoom\""
+            },
+            "skipNativeDownload": {
+                "type": "boolean",
+                "attribute": "skip-native-download",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {},
+            "closing": {},
+            "downloading": {},
+            "loadingThumbnails": {},
+            "thumbnails": {},
+            "showThumbnails": {},
+            "viewMode": {},
+            "visiblePages": {},
+            "zoom": {},
+            "zoomSteps": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "modalClose",
+                "name": "modalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "modalOpen",
+                "name": "modalOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the reader.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the reader.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "showThumbnails",
+                "methodName": "watchShowThumbnails"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}