@nice2dev/ui-forms 1.1.6 → 1.1.7

package/dist/NiceDocumentViewer-gt1mxzP8-Bdqrwhm4.js

@@ -0,0 +1,674 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { A as g } from "./index-DaptCzDp.js";
+import { forwardRef as be, useRef as V, useState as f, useMemo as _e, useCallback as l, useEffect as q, useImperativeHandle as xe } from "react";
+function ye(r, o) {
+  var a;
+  const n = ((a = r.split(".").pop()) == null ? void 0 : a.toLowerCase().split("?")[0]) ?? "";
+  return n === "pdf" ? "pdf" : ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg", "ico", "tiff", "tif"].includes(n) ? "image" : ["mp4", "webm", "ogg", "mov", "avi", "mkv"].includes(n) ? "video" : ["mp3", "wav", "flac", "aac", "m4a", "ogg"].includes(n) ? "audio" : ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "odt", "ods", "odp"].includes(n) ? "office" : n === "html" || n === "htm" ? "html" : ["txt", "log", "md", "json", "xml", "csv", "yaml", "yml"].includes(n) ? "text" : "unknown";
+}
+function ke(r) {
+  if (r === 0)
+    return "0 B";
+  const o = 1024, n = ["B", "KB", "MB", "GB"], a = Math.floor(Math.log(r) / Math.log(o));
+  return parseFloat((r / Math.pow(o, a)).toFixed(1)) + " " + n[a];
+}
+function Ce(r) {
+  const o = Math.floor(r / 3600), n = Math.floor(r % 3600 / 60), a = Math.floor(r % 60);
+  return o > 0 ? `${o}:${n.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}` : `${n}:${a.toString().padStart(2, "0")}`;
+}
+function Ne({
+  src: r,
+  page: o,
+  zoom: n,
+  rotation: a,
+  onPageChange: u,
+  onLoad: d,
+  onError: h,
+  workerUrl: p
+}) {
+  const v = V(null), z = V(null), [_, J] = f(0), [U, B] = f(!1);
+  return q(() => {
+    let x = !1;
+    return (async () => {
+      try {
+        let s;
+        if (s = window.pdfjsLib, !s)
+          try {
+            s = await new Function("m", "return import(m)")("pdfjs-dist");
+          } catch {
+            throw new Error(
+              'PDF.js library not found. Please install pdfjs-dist or include it via CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"><\/script>'
+            );
+          }
+        p ? s.GlobalWorkerOptions.workerSrc = p : s.version && (s.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${s.version}/pdf.worker.min.js`);
+        const b = await s.getDocument(r).promise;
+        if (x)
+          return;
+        z.current = b, J(b.numPages), d({
+          name: r.split("/").pop() ?? "document.pdf",
+          type: "pdf",
+          mimeType: "application/pdf",
+          pageCount: b.numPages
+        });
+      } catch (s) {
+        x || h(s instanceof Error ? s : new Error("Failed to load PDF"));
+      }
+    })(), () => {
+      x = !0;
+    };
+  }, [r, p, d, h]), q(() => {
+    const x = z.current, s = v.current;
+    if (!x || !s || _ === 0)
+      return;
+    let b = !1;
+    return (async () => {
+      if (!U) {
+        B(!0);
+        try {
+          const P = Math.max(1, Math.min(o, _)), M = await x.getPage(P);
+          if (b)
+            return;
+          const y = M.getViewport({ scale: n, rotation: a }), E = s.getContext("2d");
+          if (!E)
+            return;
+          s.height = y.height, s.width = y.width, await M.render({
+            canvasContext: E,
+            viewport: y
+          }).promise;
+        } catch (P) {
+          console.error("Error rendering PDF page:", P);
+        } finally {
+          b || B(!1);
+        }
+      }
+    })(), () => {
+      b = !0;
+    };
+  }, [o, n, a, _, U]), /* @__PURE__ */ e("div", { className: "nice-document-viewer__pdf", children: /* @__PURE__ */ e("canvas", { ref: v, className: "nice-document-viewer__pdf-canvas" }) });
+}
+function ze({
+  src: r,
+  zoom: o,
+  rotation: n,
+  onLoad: a,
+  onError: u
+}) {
+  const [d, h] = f(!1), p = l(
+    (z) => {
+      const _ = z.currentTarget;
+      h(!0), a({
+        name: r.split("/").pop() ?? "image",
+        type: "image",
+        width: _.naturalWidth,
+        height: _.naturalHeight
+      });
+    },
+    [r, a]
+  ), v = l(() => {
+    u(new Error("Failed to load image"));
+  }, [u]);
+  return /* @__PURE__ */ e("div", { className: "nice-document-viewer__image", children: /* @__PURE__ */ e(
+    "img",
+    {
+      src: r,
+      alt: "Document",
+      onLoad: p,
+      onError: v,
+      style: {
+        transform: `scale(${o}) rotate(${n}deg)`,
+        opacity: d ? 1 : 0
+      },
+      draggable: !1
+    }
+  ) });
+}
+function Ee({ src: r, type: o, onLoad: n, onError: a }) {
+  const u = V(null), d = l(() => {
+    const p = u.current;
+    if (!p)
+      return;
+    const v = {
+      name: r.split("/").pop() ?? (o === "video" ? "video" : "audio"),
+      type: o,
+      duration: p.duration
+    };
+    o === "video" && "videoWidth" in p && (v.width = p.videoWidth, v.height = p.videoHeight), n(v);
+  }, [r, o, n]), h = l(() => {
+    a(new Error(`Failed to load ${o}`));
+  }, [o, a]);
+  return o === "video" ? /* @__PURE__ */ e("div", { className: "nice-document-viewer__video", children: /* @__PURE__ */ e(
+    "video",
+    {
+      ref: u,
+      src: r,
+      controls: !0,
+      onLoadedMetadata: d,
+      onError: h
+    }
+  ) }) : /* @__PURE__ */ e("div", { className: "nice-document-viewer__audio", children: /* @__PURE__ */ e(
+    "audio",
+    {
+      ref: u,
+      src: r,
+      controls: !0,
+      onLoadedMetadata: d,
+      onError: h
+    }
+  ) });
+}
+function Le({ src: r, viewerUrl: o, onLoad: n }) {
+  const [a, u] = f(!1), d = `${o ?? "https://view.officeapps.live.com/op/embed.aspx?src="}${encodeURIComponent(r)}`, h = l(() => {
+    u(!0), n({
+      name: r.split("/").pop() ?? "document",
+      type: "office"
+    });
+  }, [r, n]);
+  return /* @__PURE__ */ e("div", { className: "nice-document-viewer__office", children: /* @__PURE__ */ e(
+    "iframe",
+    {
+      src: d,
+      onLoad: h,
+      title: "Office Document",
+      style: { opacity: a ? 1 : 0 }
+    }
+  ) });
+}
+function je({ src: r, onLoad: o, onError: n }) {
+  const [a, u] = f(null);
+  return q(() => {
+    fetch(r).then((d) => {
+      if (!d.ok)
+        throw new Error("Failed to fetch text");
+      return d.text();
+    }).then((d) => {
+      u(d), o({
+        name: r.split("/").pop() ?? "text",
+        type: "text",
+        size: d.length
+      });
+    }).catch((d) => {
+      n(d instanceof Error ? d : new Error("Failed to load text"));
+    });
+  }, [r, o, n]), a === null ? /* @__PURE__ */ e("div", { className: "nice-document-viewer__loading", children: "Loading..." }) : /* @__PURE__ */ e("div", { className: "nice-document-viewer__text", children: /* @__PURE__ */ e("pre", { children: a }) });
+}
+function Pe({ src: r, onLoad: o }) {
+  const n = l(() => {
+    o({
+      name: r.split("/").pop() ?? "page.html",
+      type: "html"
+    });
+  }, [r, o]);
+  return /* @__PURE__ */ e("div", { className: "nice-document-viewer__html", children: /* @__PURE__ */ e(
+    "iframe",
+    {
+      src: r,
+      onLoad: n,
+      title: "HTML Document",
+      sandbox: "allow-same-origin allow-scripts"
+    }
+  ) });
+}
+const $e = be(
+  function(r, o) {
+    const {
+      src: n,
+      type: a,
+      name: u,
+      height: d = 600,
+      width: h = "100%",
+      zoom: p = 1,
+      minZoom: v = 0.25,
+      maxZoom: z = 4,
+      page: _ = 1,
+      showToolbar: J = !0,
+      showPageNav: U = !0,
+      showZoomControls: B = !0,
+      showFullscreen: x = !0,
+      showDownload: s = !0,
+      showPrint: b = !0,
+      showRotate: P = !0,
+      enableKeyboard: M = !0,
+      onLoad: y,
+      onError: E,
+      onPageChange: I,
+      onZoomChange: W,
+      pdfWorkerUrl: oe,
+      officeViewerUrl: ie,
+      loading: ae,
+      errorContent: Y,
+      className: ce,
+      "data-testid": de
+    } = r, Q = V(null), [t, le] = f(null), [k, se] = f(_), [L, ue] = f(p), [ee, me] = f(0), [H, ne] = f(!1), [T, pe] = f(null), [fe, te] = f(!0), C = _e(() => a ?? ye(n), [n, a]), j = l(
+      (i) => {
+        le(i), te(!1), y == null || y(i);
+      },
+      [y]
+    ), A = l(
+      (i) => {
+        pe(i), te(!1), E == null || E(i);
+      },
+      [E]
+    ), w = l(
+      (i) => {
+        const c = (t == null ? void 0 : t.pageCount) ?? 1, Z = Math.max(1, Math.min(i, c));
+        se(Z), I == null || I(Z);
+      },
+      [t == null ? void 0 : t.pageCount, I]
+    ), D = l(() => w(k + 1), [k, w]), F = l(() => w(k - 1), [k, w]), N = l(
+      (i) => {
+        const c = Math.max(v, Math.min(i, z));
+        ue(c), W == null || W(c);
+      },
+      [v, z, W]
+    ), $ = l(() => N(L * 1.25), [L, N]), K = l(() => N(L / 1.25), [L, N]), R = l(() => N(1), [N]), G = l((i) => {
+      me((c) => (c + i) % 360);
+    }, []), O = l(() => {
+      const i = document.createElement("a");
+      i.href = n, i.download = u ?? (t == null ? void 0 : t.name) ?? "document", document.body.appendChild(i), i.click(), document.body.removeChild(i);
+    }, [n, u, t == null ? void 0 : t.name]), X = l(() => {
+      const i = window.open(n, "_blank");
+      i && (i.onload = () => i.print());
+    }, [n]), S = l(() => {
+      var i, c, Z;
+      Q.current && (H ? ((i = document.exitFullscreen) == null || i.call(document), ne(!1)) : ((Z = (c = Q.current).requestFullscreen) == null || Z.call(c), ne(!0)));
+    }, [H]);
+    q(() => {
+      if (!M)
+        return;
+      const i = (c) => {
+        switch (c.key) {
+          case "ArrowRight":
+          case "PageDown":
+            D();
+            break;
+          case "ArrowLeft":
+          case "PageUp":
+            F();
+            break;
+          case "Home":
+            w(1);
+            break;
+          case "End":
+            w((t == null ? void 0 : t.pageCount) ?? 1);
+            break;
+          case "+":
+          case "=":
+            (c.ctrlKey || c.metaKey) && (c.preventDefault(), $());
+            break;
+          case "-":
+            (c.ctrlKey || c.metaKey) && (c.preventDefault(), K());
+            break;
+          case "0":
+            (c.ctrlKey || c.metaKey) && (c.preventDefault(), R());
+            break;
+          case "f":
+            (c.ctrlKey || c.metaKey) && (c.preventDefault(), S());
+            break;
+        }
+      };
+      return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+    }, [
+      M,
+      D,
+      F,
+      w,
+      t == null ? void 0 : t.pageCount,
+      $,
+      K,
+      R,
+      S
+    ]), xe(
+      o,
+      () => ({
+        goToPage: w,
+        nextPage: D,
+        prevPage: F,
+        setZoom: N,
+        zoomIn: $,
+        zoomOut: K,
+        resetZoom: R,
+        rotate: G,
+        download: O,
+        print: X,
+        toggleFullscreen: S,
+        getInfo: () => t
+      }),
+      [
+        w,
+        D,
+        F,
+        N,
+        $,
+        K,
+        R,
+        G,
+        O,
+        X,
+        S,
+        t
+      ]
+    );
+    const he = () => {
+      if (T)
+        return (typeof Y == "function" ? Y(T) : Y) ?? /* @__PURE__ */ e("div", { className: "nice-document-viewer__error", children: /* @__PURE__ */ m("span", { children: [
+          /* @__PURE__ */ e(g, { name: "warning", size: 14 }),
+          " ",
+          T.message
+        ] }) });
+      switch (C) {
+        case "pdf":
+          return /* @__PURE__ */ e(
+            Ne,
+            {
+              src: n,
+              page: k,
+              zoom: L,
+              rotation: ee,
+              onPageChange: w,
+              onLoad: j,
+              onError: A,
+              workerUrl: oe
+            }
+          );
+        case "image":
+          return /* @__PURE__ */ e(
+            ze,
+            {
+              src: n,
+              zoom: L,
+              rotation: ee,
+              onLoad: j,
+              onError: A
+            }
+          );
+        case "video":
+        case "audio":
+          return /* @__PURE__ */ e(Ee, { src: n, type: C, onLoad: j, onError: A });
+        case "office":
+          return /* @__PURE__ */ e(Le, { src: n, viewerUrl: ie, onLoad: j });
+        case "text":
+          return /* @__PURE__ */ e(je, { src: n, onLoad: j, onError: A });
+        case "html":
+          return /* @__PURE__ */ e(Pe, { src: n, onLoad: j });
+        default:
+          return /* @__PURE__ */ m("div", { className: "nice-document-viewer__unknown", children: [
+            /* @__PURE__ */ m("span", { children: [
+              /* @__PURE__ */ e(g, { name: "file", size: 14 }),
+              " Unknown document type"
+            ] }),
+            /* @__PURE__ */ e("button", { type: "button", onClick: O, children: "Download" })
+          ] });
+      }
+    }, ve = U && C === "pdf" && ((t == null ? void 0 : t.pageCount) ?? 0) > 1, we = B && (C === "pdf" || C === "image"), ge = P && (C === "pdf" || C === "image");
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: Q,
+        className: `nice-document-viewer ${H ? "nice-document-viewer--fullscreen" : ""} ${ce ?? ""}`,
+        style: { height: d, width: h },
+        "data-testid": de,
+        "data-type": C,
+        children: [
+          J && /* @__PURE__ */ m("div", { className: "nice-document-viewer__toolbar", children: [
+            /* @__PURE__ */ e("div", { className: "nice-document-viewer__toolbar-left", children: ve && /* @__PURE__ */ m("div", { className: "nice-document-viewer__pagination", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: F,
+                  disabled: k <= 1,
+                  "aria-label": "Previous page",
+                  children: /* @__PURE__ */ e(g, { name: "chevron-left", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ m("span", { children: [
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    type: "number",
+                    value: k,
+                    onChange: (i) => w(parseInt(i.target.value, 10)),
+                    min: 1,
+                    max: (t == null ? void 0 : t.pageCount) ?? 1
+                  }
+                ),
+                "/ ",
+                (t == null ? void 0 : t.pageCount) ?? 1
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: D,
+                  disabled: k >= ((t == null ? void 0 : t.pageCount) ?? 1),
+                  "aria-label": "Next page",
+                  children: /* @__PURE__ */ e(g, { name: "chevron-right", size: 16 })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ m("div", { className: "nice-document-viewer__toolbar-center", children: [
+              we && /* @__PURE__ */ m("div", { className: "nice-document-viewer__zoom", children: [
+                /* @__PURE__ */ e("button", { type: "button", onClick: K, "aria-label": "Zoom out", children: "−" }),
+                /* @__PURE__ */ m("span", { children: [
+                  Math.round(L * 100),
+                  "%"
+                ] }),
+                /* @__PURE__ */ e("button", { type: "button", onClick: $, "aria-label": "Zoom in", children: "+" }),
+                /* @__PURE__ */ e("button", { type: "button", onClick: R, "aria-label": "Reset zoom", children: /* @__PURE__ */ e(g, { name: "refresh", size: 16 }) })
+              ] }),
+              ge && /* @__PURE__ */ m("div", { className: "nice-document-viewer__rotation", children: [
+                /* @__PURE__ */ e("button", { type: "button", onClick: () => G(270), "aria-label": "Rotate left", children: /* @__PURE__ */ e(g, { name: "refresh", size: 16 }) }),
+                /* @__PURE__ */ e("button", { type: "button", onClick: () => G(90), "aria-label": "Rotate right", children: /* @__PURE__ */ e(g, { name: "refresh", size: 16 }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ m("div", { className: "nice-document-viewer__toolbar-right", children: [
+              s && /* @__PURE__ */ e("button", { type: "button", onClick: O, "aria-label": "Download", children: /* @__PURE__ */ e(g, { name: "download", size: 16 }) }),
+              b && /* @__PURE__ */ e("button", { type: "button", onClick: X, "aria-label": "Print", children: /* @__PURE__ */ e(g, { name: "printer", size: 16 }) }),
+              x && /* @__PURE__ */ e("button", { type: "button", onClick: S, "aria-label": "Fullscreen", children: /* @__PURE__ */ e(g, { name: H ? "collapse" : "expand", size: 16 }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ m("div", { className: "nice-document-viewer__content", children: [
+            fe && !T && (ae ?? /* @__PURE__ */ e("div", { className: "nice-document-viewer__loading", children: "Loading..." })),
+            he()
+          ] }),
+          t && /* @__PURE__ */ m("div", { className: "nice-document-viewer__info", children: [
+            /* @__PURE__ */ e("span", { className: "nice-document-viewer__name", children: u ?? t.name }),
+            t.size && /* @__PURE__ */ e("span", { className: "nice-document-viewer__size", children: ke(t.size) }),
+            t.width && t.height && /* @__PURE__ */ m("span", { className: "nice-document-viewer__dimensions", children: [
+              t.width,
+              " × ",
+              t.height
+            ] }),
+            t.duration && /* @__PURE__ */ e("span", { className: "nice-document-viewer__duration", children: Ce(t.duration) })
+          ] })
+        ]
+      }
+    );
+  }
+), re = "nice-document-viewer-styles";
+if (typeof document < "u" && !document.getElementById(re)) {
+  const r = document.createElement("style");
+  r.id = re, r.textContent = `
+    .nice-document-viewer {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--nice-border-color, #e5e7eb);
+      border-radius: var(--nice-radius-sm, 4px);
+      overflow: hidden;
+      background: var(--nice-bg-primary, #ffffff);
+    }
+
+    .nice-document-viewer--fullscreen {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 9999;
+      border: none;
+      border-radius: 0;
+    }
+
+    .nice-document-viewer__toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--nice-space-2, 8px) var(--nice-space-3, 12px);
+      background: var(--nice-bg-primary, #ffffff);
+      border-bottom: 1px solid var(--nice-border-color, #e5e7eb);
+      flex-shrink: 0;
+    }
+
+    .nice-document-viewer__toolbar-left,
+    .nice-document-viewer__toolbar-center,
+    .nice-document-viewer__toolbar-right {
+      display: flex;
+      align-items: center;
+      gap: var(--nice-space-2, 8px);
+    }
+
+    .nice-document-viewer__toolbar button {
+      padding: var(--nice-space-1-5, 6px) var(--nice-space-2-5, 10px);
+      border: 1px solid var(--nice-border-color, #e5e7eb);
+      border-radius: var(--nice-radius-sm, 4px);
+      background: var(--nice-bg-primary, #ffffff);
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .nice-document-viewer__toolbar button:hover:not(:disabled) {
+      background: var(--nice-hover-bg, color-mix(in srgb, var(--nice-text-primary, #000) 4%, transparent));
+    }
+
+    .nice-document-viewer__toolbar button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .nice-document-viewer__pagination,
+    .nice-document-viewer__zoom,
+    .nice-document-viewer__rotation {
+      display: flex;
+      align-items: center;
+      gap: var(--nice-space-1-5, 6px);
+    }
+
+    .nice-document-viewer__pagination input {
+      width: 50px;
+      padding: var(--nice-space-1, 4px);
+      border: 1px solid var(--nice-border-color, #e5e7eb);
+      border-radius: var(--nice-radius-sm, 4px);
+      text-align: center;
+    }
+
+    .nice-document-viewer__zoom span {
+      min-width: 50px;
+      text-align: center;
+      font-size: 13px;
+    }
+
+    .nice-document-viewer__content {
+      flex: 1;
+      overflow: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    .nice-document-viewer__loading,
+    .nice-document-viewer__error,
+    .nice-document-viewer__unknown {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--nice-space-3, 12px);
+      padding: var(--nice-space-10, 40px);
+      color: var(--nice-text-secondary, #475569);
+    }
+
+    .nice-document-viewer__error span {
+      color: var(--nice-error, #d32f2f);
+    }
+
+    .nice-document-viewer__pdf,
+    .nice-document-viewer__image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100%;
+      min-width: 100%;
+    }
+
+    .nice-document-viewer__pdf-canvas {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .nice-document-viewer__image img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      transition: transform 0.2s;
+    }
+
+    .nice-document-viewer__video,
+    .nice-document-viewer__audio {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .nice-document-viewer__video video,
+    .nice-document-viewer__audio audio {
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    .nice-document-viewer__office iframe,
+    .nice-document-viewer__html iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    .nice-document-viewer__text {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: var(--nice-space-4, 16px);
+      background: var(--nice-bg-primary, #ffffff);
+    }
+
+    .nice-document-viewer__text pre {
+      margin: 0;
+      font-family: 'Fira Code', monospace;
+      font-size: 13px;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    .nice-document-viewer__info {
+      display: flex;
+      align-items: center;
+      gap: var(--nice-space-4, 16px);
+      padding: var(--nice-space-1-5, 6px) var(--nice-space-3, 12px);
+      background: var(--nice-bg-primary, #ffffff);
+      border-top: 1px solid var(--nice-border-color, #e5e7eb);
+      font-size: 12px;
+      color: var(--nice-text-secondary, #475569);
+      flex-shrink: 0;
+    }
+
+    .nice-document-viewer__name {
+      font-weight: 500;
+      color: var(--nice-text-primary, #0f172a);
+    }
+  `, document.head.appendChild(r);
+}
+export {
+  $e as NiceDocumentViewer
+};