@progress/kendo-vue-pdf-viewer 9.2.0-develop.2

package/PDFViewer.mjs

@@ -0,0 +1,711 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as Z, h as f, createVNode as s, createTextVNode as M, Fragment as D, isVNode as $ } from "vue";
+import { Button as a, ToolbarSpacer as I, ButtonGroup as y, Toolbar as L } from "@progress/kendo-vue-buttons";
+import { TextBox as P, InputSeparator as O } from "@progress/kendo-vue-inputs";
+import { Pager as F } from "@progress/kendo-vue-data-tools";
+import { Upload as N } from "@progress/kendo-vue-upload";
+import { ComboBox as R } from "@progress/kendo-vue-dropdowns";
+import { Loader as V } from "@progress/kendo-vue-indicators";
+import { templateRendering as v, getListeners as b, getTemplate as k, WatermarkOverlay as B, classNames as A, isRtl as x, validatePackage as j, shouldShowValidationUI as W, getLicenseMessage as U } from "@progress/kendo-vue-common";
+import { arrowUpIcon as K, arrowDownIcon as q, xIcon as G, zoomOutIcon as H, zoomInIcon as J, pointerIcon as Q, handIcon as X, searchIcon as Y, folderOpenIcon as tt, downloadIcon as et, printIcon as ot, convertLowercaseIcon as st } from "@progress/kendo-svg-icons";
+import "pdfjs-dist/build/pdf.worker.min.mjs";
+import { packageMetadata as _ } from "./package-metadata.mjs";
+import { DEFAULT_ZOOM_LEVEL as it, removeChildren as h, loadPDF as C, print as at, download as rt, calculateZoomLevel as lt, currentPage as nt, scrollToPage as z, goToNextSearchMatch as w, goToPreviousSearchMatch as ct, reloadDocument as ht, SearchService as ut, Scroller as dt } from "@progress/kendo-pdfviewer-common";
+import { actualWidth as pt, fitToWidth as mt, fitToPage as gt, canvasAriaLabel as ft, searchPanelAriaLabel as vt, search as S, searchOf as bt, prevMatch as kt, nextMatch as _t, close as zt, zoomOut as yt, zoomIn as xt, zoomLevel as Ct, enableSelection as wt, enablePanning as St, open as Et, download as Tt, print as Zt, popupBlocked as Mt, messages as E, matchCase as Dt } from "./messages.mjs";
+function $t(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !$(t);
+}
+const T = ["pager", "spacer", "zoomInOut", "zoom", "selection", "spacer", "search", "open", "download", "print"], n = {
+  minZoom: 0.5,
+  maxZoom: 4,
+  tools: [...T],
+  zoomRate: 0.25,
+  zoomLevels: [{
+    id: 1,
+    priority: 1,
+    value: 1,
+    text: "Actual width",
+    type: "ActualWidth",
+    locationString: pt
+  }, {
+    id: 2,
+    priority: 2,
+    value: 1,
+    text: "Fit to width",
+    type: "FitToWidth",
+    locationString: mt
+  }, {
+    id: 3,
+    priority: 3,
+    value: 1,
+    text: "Fit to page",
+    type: "FitToPage",
+    locationString: gt
+  }, {
+    id: 4,
+    priority: 4,
+    value: 0.5,
+    text: "50%",
+    type: ""
+  }, {
+    id: 5,
+    priority: 5,
+    value: 0.75,
+    text: "75%",
+    type: ""
+  }, {
+    id: 6,
+    priority: 100,
+    value: 1,
+    text: "100%",
+    type: ""
+  }, {
+    id: 7,
+    priority: 7,
+    value: 1.25,
+    text: "125%",
+    type: ""
+  }, {
+    id: 8,
+    priority: 8,
+    value: 1.5,
+    text: "150%",
+    type: ""
+  }, {
+    id: 9,
+    priority: 9,
+    value: 2,
+    text: "200%",
+    type: ""
+  }, {
+    id: 10,
+    priority: 10,
+    value: 3,
+    text: "300%",
+    type: ""
+  }, {
+    id: 11,
+    priority: 11,
+    value: 4,
+    text: "400%",
+    type: ""
+  }],
+  defaultZoom: it
+}, It = [".k-toolbar > button", ".k-toolbar .k-combobox > input", ".k-toolbar .k-button-group > button", ".k-toolbar .k-pager > a", ".k-toolbar .k-pager input"], Lt = (t, e) => t.priority > e.priority ? -1 : t.priority < e.priority ? 1 : 0, Gt = /* @__PURE__ */ Z({
+  name: "KendoPDFViewer",
+  emits: {
+    error: (t) => !0,
+    load: (t) => !0,
+    download: (t) => !0,
+    zoom: (t) => !0,
+    pagechange: (t) => !0
+  },
+  props: {
+    url: String,
+    data: String,
+    arrayBuffer: Object,
+    typedArray: Object,
+    dir: {
+      type: String,
+      validator: function(t) {
+        return [null, "ltr", "rtl"].includes(t);
+      }
+    },
+    saveFileName: String,
+    saveOptions: Object,
+    tools: {
+      type: Array,
+      default: () => [...T]
+    },
+    zoomLevels: {
+      type: Array,
+      default: () => n.zoomLevels
+    },
+    zoom: Number,
+    defaultZoom: {
+      type: Number,
+      default: n.defaultZoom
+    },
+    minZoom: {
+      type: Number,
+      default: n.minZoom
+    },
+    maxZoom: {
+      type: Number,
+      default: n.maxZoom
+    },
+    zoomRate: {
+      type: Number,
+      default: n.zoomRate
+    },
+    toolbar: [String, Function, Object],
+    content: [String, Function, Object],
+    loader: [String, Function, Object]
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data() {
+    return {
+      stateZoom: this.$props.defaultZoom,
+      hasDocument: !1,
+      loading: !0,
+      skip: 0,
+      enabledSelection: !0,
+      showSearch: !1,
+      matches: 0,
+      currentMatch: 0,
+      matchCase: !1,
+      searchText: "",
+      showLicenseWatermark: !1,
+      currentRtl: !1
+    };
+  },
+  created() {
+    j(_), this.showLicenseWatermark = W(_), this._licenseMessage = U(_), this._pagesEl = null, this._pdfViewerEl = null, this._scroller = null, this._search = null, this._document = null, this._pages = [], this._zoom = null;
+  },
+  computed: {
+    currentZoom() {
+      return this.$props.zoom === void 0 ? this.stateZoom : this.$props.zoom;
+    },
+    currentZoomLevel() {
+      const o = this.$props.zoomLevels.slice().sort(Lt).find((i) => i.value === this.currentZoom) || {
+        text: this.currentZoom * 100 + "%",
+        value: this.currentZoom,
+        id: this.currentZoom,
+        locationString: ""
+      };
+      return o.locationString ? {
+        ...o,
+        text: this.localize(o.locationString)
+      } : o;
+    },
+    currentDir() {
+      return this.$props.dir !== void 0 ? this.$props.dir : this.currentRtl ? "rtl" : "ltr";
+    }
+  },
+  watch: {
+    url() {
+      this.loadDocument();
+    },
+    data() {
+      this.loadDocument();
+    },
+    arrayBuffer() {
+      this.loadDocument();
+    },
+    currentZoom(t, e) {
+      this.setScaleFactor(t), this._pagesEl && this._document && t !== this._zoom && this.reload(this._document, t, this.skip);
+    }
+  },
+  mounted() {
+    this.currentRtl = x(this._pdfViewerEl), this.loadDocument();
+  },
+  updated() {
+    this.currentRtl = x(this._pdfViewerEl);
+  },
+  beforeUnmount() {
+    this._scroller && this._scroller.destroy(), this._search && this._search.destroy(), this._document = null, this._pages = [];
+  },
+  methods: {
+    localize(t) {
+      const e = this.kendoLocalizationService;
+      return e ? e.toLanguageString(t, E[t]) : E[t];
+    },
+    getTarget() {
+      return {
+        element: this._pdfViewerEl,
+        props: this.$props,
+        document: this._document,
+        pages: this._pages
+      };
+    },
+    setScaleFactor(t) {
+      this._pagesEl && this._pagesEl.style.setProperty("--scale-factor", String(t));
+    },
+    loadDocument() {
+      if (this._pagesEl)
+        if (this.$props.url || this.$props.data || this.$props.arrayBuffer) {
+          this.loading = !0, h(this._pagesEl);
+          const t = this._pagesEl;
+          setTimeout(() => {
+            C({
+              url: this.$props.url,
+              data: this.$props.data,
+              arrayBuffer: this.$props.arrayBuffer,
+              dom: t,
+              zoom: this.currentZoom,
+              done: this.onDone,
+              error: this.onError
+            }), this.setScaleFactor(this.currentZoom);
+          });
+        } else
+          this._document = null, this._pages = [], this.hasDocument = !1, this.loading = !1, h(this._pagesEl);
+    },
+    onDone({
+      pdfPages: t,
+      pdfDoc: e,
+      zoom: o
+    }) {
+      this._document = e, this._pages = t, this._zoom = o, this.initScroller(), this.loading = !1, this.hasDocument = !0, this.triggerOnLoad(), this._pagesEl && z(this._pagesEl, 0);
+    },
+    onError(t) {
+      this._document = null, this._pages = [], this.loading = !1, this.hasDocument = !1;
+      const e = typeof t == "string" ? {
+        message: t
+      } : t, o = {
+        error: e != null ? e : this.localize(Mt),
+        target: this.getTarget()
+      };
+      this.$emit("error", o);
+    },
+    triggerOnLoad() {
+      const t = {
+        target: this.getTarget()
+      };
+      this.$emit("load", t);
+    },
+    triggerOnDownload(t, e, o) {
+      const i = {
+        target: this.getTarget(),
+        blob: t,
+        fileName: e,
+        saveOptions: o
+      };
+      return this.$emit("download", i), !1;
+    },
+    initScroller() {
+      var t;
+      this._scroller && this._scroller.destroy(), this._scroller = new dt((t = this._pagesEl) == null ? void 0 : t.parentNode, {
+        filter: ".k-page",
+        events: {}
+      }), this._scroller.disablePanEventsTracking();
+    },
+    initSearch(t) {
+      const e = Array.from(t.querySelectorAll(".k-text-layer"));
+      this._search = new ut({
+        textContainers: e || [],
+        highlightClass: "k-search-highlight",
+        highlightMarkClass: "k-search-highlight-mark",
+        charClass: "k-text-char"
+      });
+    },
+    reload(t, e, o) {
+      this._pagesEl && this._pdfViewerEl && (this.loading = !0, h(this._pagesEl), ht({
+        pdfDoc: t,
+        zoom: e,
+        dom: this._pagesEl,
+        done: (i) => {
+          this._pages = i, this._zoom = e, this.loading = !1, this._pagesEl && o > 0 && z(this._pagesEl, o);
+        },
+        error: this.onError
+      }));
+    },
+    onSearchClick() {
+      this.showSearch = !0, this.initSearch(this._pagesEl);
+    },
+    onSearchTextChange(t) {
+      const e = t.value, o = this._search.search({
+        text: e,
+        matchCase: this.matchCase
+      });
+      this.currentMatch = o.length ? 1 : 0, this.matches = o.length, this.searchText = e;
+    },
+    onMatchCaseClick() {
+      const t = this._search.search({
+        text: this.searchText,
+        matchCase: !this.matchCase
+      });
+      this.currentMatch = t.length ? 1 : 0, this.matches = t.length, this.matchCase = !this.matchCase;
+    },
+    onNextMatch() {
+      w({
+        search: this._search,
+        scroller: this._scroller
+      }), this.currentMatch = this.currentMatch + 1 > this.matches ? 1 : this.currentMatch + 1;
+    },
+    onPrevMatch() {
+      ct({
+        search: this._search,
+        scroller: this._scroller
+      }), this.currentMatch = this.currentMatch - 1 < 1 ? this.matches : this.currentMatch - 1;
+    },
+    onClose() {
+      this._search.destroy(), this.currentMatch = 0, this.matches = 0, this.matchCase = !1, this.searchText = "", this.showSearch = !1;
+    },
+    onTextBoxKeyDown(t) {
+      t.key === "Enter" ? (t.preventDefault(), w({
+        search: this._search,
+        scroller: this._scroller
+      }), this.currentMatch = this.currentMatch + 1 > this.matches ? 1 : this.currentMatch + 1) : t.key === "Escape" && this.onClose();
+    },
+    onPageChange(t) {
+      if (this._pagesEl) {
+        const e = t.skip;
+        z(this._pagesEl, e);
+        const o = {
+          page: e + 1,
+          target: this.getTarget()
+        };
+        this.$emit("pagechange", o);
+      }
+      this.skip = t.skip;
+    },
+    onScroll(t) {
+      if (this._pdfViewerEl) {
+        const e = nt(this._pdfViewerEl);
+        if (e !== this.skip) {
+          this.skip = e;
+          const o = {
+            page: e + 1,
+            target: this.getTarget()
+          };
+          this.$emit("pagechange", o);
+        }
+      }
+    },
+    onZoomIn(t) {
+      const e = Math.min(this.currentZoom + this.$props.zoomRate, this.$props.maxZoom);
+      if (e !== this.currentZoom && this._document) {
+        this.stateZoom = e;
+        const o = {
+          zoom: e,
+          target: this.getTarget()
+        };
+        this.$emit("zoom", o);
+      }
+    },
+    onZoomOut(t) {
+      const e = Math.max(this.currentZoom - this.$props.zoomRate, this.$props.minZoom);
+      if (e !== this.currentZoom && this._document) {
+        this.stateZoom = e;
+        const o = {
+          zoom: e,
+          target: this.getTarget()
+        };
+        this.$emit("zoom", o);
+      }
+    },
+    onZoomLevelChange(t) {
+      const e = t.value === null ? {
+        text: "100%",
+        value: 1
+      } : {
+        ...t.value
+      };
+      if (e.value === void 0) {
+        const i = Number.parseFloat(e.text);
+        typeof i == "number" && !Number.isNaN(i) ? e.value = i / 100 : e.value = 1;
+      }
+      let o = e ? lt(e.value, e.type, this.currentZoom, this._pagesEl) : 1;
+      if (o = Math.round(o * 100) / 100, this.currentZoom !== o && this._document) {
+        this.stateZoom = o;
+        const i = {
+          zoom: o,
+          target: this.getTarget()
+        };
+        this.$emit("zoom", i);
+      }
+    },
+    onTextSelection() {
+      this._scroller.disablePanEventsTracking(), this.enabledSelection = !0;
+    },
+    onPinning() {
+      this._scroller.enablePanEventsTracking(), this.enabledSelection = !1;
+    },
+    onDownloadClick() {
+      rt({
+        pdf: this._document,
+        error: this.onError
+      }, this.$props.saveFileName, this.$props.saveOptions, this.triggerOnDownload);
+    },
+    onPrintClick() {
+      this.loading = !0;
+      const t = (o) => {
+        this.loading = !1, this.onError(o);
+      }, e = () => {
+        this.loading = !1;
+      };
+      at(this._pages, e, t);
+    },
+    onAdd(t) {
+      var o;
+      const e = t.newState;
+      (o = e[0]) != null && o.getRawFile && e[0].getRawFile().arrayBuffer().then((c) => {
+        if (this._pagesEl) {
+          this.loading = !0, h(this._pagesEl);
+          const r = this.$props.zoom === void 0 ? this.$props.defaultZoom : this.$props.zoom;
+          C({
+            arrayBuffer: c,
+            dom: this._pagesEl,
+            zoom: r,
+            done: this.onDone,
+            error: this.onError
+          }), this.stateZoom = r;
+        }
+      });
+    },
+    onFileOpen(t) {
+      const e = t.target;
+      if (e instanceof Element && e.parentNode) {
+        const o = e.closest(".k-toolbar"), i = o == null ? void 0 : o.querySelector(".k-upload input");
+        i && i.click();
+      }
+    },
+    renderLoader() {
+      return this.loading ? s("div", {
+        class: "k-loader-container k-loader-container-md k-loader-top"
+      }, [s("div", {
+        class: "k-overlay"
+      }, null), s("div", {
+        class: "k-loader-container-inner "
+      }, [s(V, {
+        size: "large"
+      }, null)])]) : null;
+    },
+    renderToolbar() {
+      const t = s(F, {
+        previousNext: !0,
+        type: "input",
+        skip: this.skip,
+        take: 1,
+        total: this._pages ? this._pages.length : 0,
+        info: !1,
+        onPagechange: this.onPageChange
+      }, null), e = s(I, null, null), o = s(y, {
+        class: "k-toolbar-button-group k-button-group-solid"
+      }, {
+        default: () => [s(a, {
+          class: "k-group-start",
+          fillMode: "flat",
+          themeColor: "base",
+          title: this.localize(yt),
+          disabled: this.currentZoom <= this.$props.minZoom || !this.hasDocument,
+          onClick: this.onZoomOut,
+          icon: "zoom-out",
+          svgIcon: H
+        }, null), s(a, {
+          class: "k-group-end",
+          fillMode: "flat",
+          themeColor: "base",
+          title: this.localize(xt),
+          disabled: this.currentZoom >= this.$props.maxZoom || !this.hasDocument,
+          onClick: this.onZoomIn,
+          icon: "zoom-in",
+          svgIcon: J
+        }, null)]
+      }), i = s(R, {
+        class: "k-toolbar-combobox",
+        disabled: !this.hasDocument,
+        dataItems: this.$props.zoomLevels.map((l) => ({
+          ...l,
+          text: l.locationString ? this.localize(l.locationString) : l.text
+        })),
+        dataItemKey: "id",
+        textField: "text",
+        value: this.hasDocument ? this.currentZoomLevel : null,
+        allowCustom: !0,
+        onChange: this.onZoomLevelChange,
+        placeholder: this.localize(Ct)
+      }, null), c = s(y, {
+        class: "k-toolbar-button-group k-button-group-solid"
+      }, {
+        default: () => [s(a, {
+          class: "k-group-start",
+          fillMode: "flat",
+          themeColor: "base",
+          title: this.localize(wt),
+          icon: "pointer",
+          svgIcon: Q,
+          disabled: !this.hasDocument,
+          togglable: !0,
+          selected: this.enabledSelection && this.hasDocument,
+          onClick: this.onTextSelection
+        }, null), s(a, {
+          class: "k-group-end",
+          fillMode: "flat",
+          themeColor: "base",
+          title: this.localize(St),
+          icon: "hand",
+          svgIcon: X,
+          disabled: !this.hasDocument,
+          togglable: !0,
+          selected: !this.enabledSelection && this.hasDocument,
+          onClick: this.onPinning
+        }, null)]
+      }), r = s(a, {
+        class: "k-toolbar-button",
+        fillMode: "flat",
+        themeColor: "base",
+        title: this.localize(S),
+        icon: "search",
+        svgIcon: Y,
+        disabled: !this.hasDocument,
+        onClick: this.onSearchClick,
+        "aria-haspopup": "dialog"
+      }, null), u = s("span", null, [s(a, {
+        class: "k-toolbar-button",
+        fillMode: "flat",
+        themeColor: "base",
+        title: this.localize(Et),
+        icon: "folder-open",
+        svgIcon: tt,
+        onClick: this.onFileOpen
+      }, null), s("div", {
+        style: {
+          display: "none"
+        }
+      }, [s(N, {
+        restrictions: {
+          allowedExtensions: [".pdf"]
+        },
+        onAdd: this.onAdd,
+        autoUpload: !1,
+        defaultFiles: [],
+        multiple: !1,
+        accept: ".pdf,.PDF",
+        withCredentials: !1
+      }, null)])]), d = s(a, {
+        class: "k-toolbar-button",
+        fillMode: "flat",
+        themeColor: "base",
+        title: this.localize(Tt),
+        icon: "download",
+        svgIcon: et,
+        disabled: !this.hasDocument,
+        onClick: this.onDownloadClick
+      }, null), p = s(a, {
+        class: "k-toolbar-button",
+        fillMode: "flat",
+        themeColor: "base",
+        title: this.localize(Zt),
+        icon: "print",
+        svgIcon: ot,
+        disabled: !this.hasDocument,
+        onClick: this.onPrintClick
+      }, null), m = {
+        pager: t,
+        spacer: e,
+        zoomInOut: o,
+        zoom: i,
+        selection: c,
+        search: r,
+        open: u,
+        download: d,
+        print: p
+      }, g = (this.$props.tools || n.tools).map((l) => m[l]);
+      return s(L, {
+        buttons: It,
+        overflow: "none",
+        class: "k-pdf-viewer-toolbar",
+        dir: this.currentDir
+      }, $t(g) ? g : {
+        default: () => [g]
+      });
+    },
+    renderContent() {
+      const t = () => s(D, null, [s(O, null, null), s("span", {
+        class: "k-input-suffix"
+      }, [s(a, {
+        icon: "convert-lowercase",
+        svgIcon: st,
+        title: this.localize(Dt),
+        fillMode: "flat",
+        togglable: !0,
+        selected: this.matchCase,
+        onClick: this.onMatchCaseClick
+      }, null)])]);
+      return s("div", {
+        class: A("k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto", {
+          "k-enable-text-select": this.enabledSelection,
+          "k-enable-panning": !this.enabledSelection
+        }),
+        tabindex: 0,
+        role: "document",
+        "aria-label": this.localize(ft),
+        onScroll: this.onScroll
+      }, [this.showSearch ? s("div", {
+        class: "k-search-panel k-pos-sticky k-top-center",
+        role: "dialog",
+        "aria-label": this.localize(vt)
+      }, [s(P, {
+        value: this.searchText,
+        onInput: this.onSearchTextChange,
+        placeholder: this.localize(S),
+        onKeydown: this.onTextBoxKeyDown,
+        suffix: t
+      }, null), s("span", {
+        class: "k-search-matches"
+      }, [s("span", null, [this.currentMatch]), M(" "), this.localize(bt), s("span", null, [this.matches])]), s(a, {
+        title: this.localize(kt),
+        fillMode: "flat",
+        icon: "arrow-up",
+        svgIcon: K,
+        disabled: this.matches === 0,
+        onClick: this.onPrevMatch
+      }, null), s(a, {
+        title: this.localize(_t),
+        fillMode: "flat",
+        icon: "arrow-down",
+        svgIcon: q,
+        disabled: this.matches === 0,
+        onClick: this.onNextMatch
+      }, null), s(a, {
+        title: this.localize(zt),
+        fillMode: "flat",
+        icon: "x",
+        svgIcon: G,
+        onClick: this.onClose
+      }, null)]) : null, s("div", {
+        ref: (e) => {
+          this._pagesEl = e;
+        },
+        class: "k-pdf-viewer-pages"
+      }, null)]);
+    }
+  },
+  render() {
+    const t = this.renderLoader(), e = this.renderToolbar(), o = this.renderContent(), i = v.call(this, this.$props.toolbar, b.call(this)), c = v.call(this, this.$props.content, b.call(this)), r = v.call(this, this.$props.loader, b.call(this)), u = k.call(this, {
+      h: f,
+      template: i,
+      defaultRendering: e,
+      additionalProps: {
+        defaultRendering: e
+      }
+    }), d = k.call(this, {
+      h: f,
+      template: c,
+      defaultRendering: o,
+      additionalProps: {
+        defaultRendering: o
+      }
+    }), p = k.call(this, {
+      h: f,
+      template: r,
+      defaultRendering: t,
+      additionalProps: {
+        defaultRendering: t
+      }
+    });
+    return s("div", {
+      class: "k-pdf-viewer",
+      dir: this.$props.dir,
+      ref: (m) => {
+        this._pdfViewerEl = m;
+      }
+    }, [p, u, d, this.showLicenseWatermark ? s(B, {
+      message: this._licenseMessage
+    }, null) : null]);
+  }
+});
+export {
+  Gt as PDFViewer
+};