@getflip/swirl-components 0.2.0 → 0.3.1

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-image/flip-file-viewer-image.js

@@ -0,0 +1,99 @@
+import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
+export class FlipFileViewerImage {
+  constructor() {
+    this.description = "";
+    this.errorMessage = "File could not be loaded.";
+    this.loading = true;
+    this.onError = () => {
+      this.error = true;
+      this.loading = false;
+    };
+    this.onLoad = () => {
+      this.error = false;
+      this.loading = false;
+    };
+  }
+  watchFile() {
+    this.error = false;
+    this.loading = true;
+  }
+  render() {
+    return (h(Host, { class: "file-viewer-image" },
+      this.error && (h("flip-inline-error", { class: "file-viewer-image__error", message: this.errorMessage })),
+      h("img", { alt: this.description, class: "file-viewer-image__image", onError: this.onError, onLoad: this.onLoad, src: this.file }),
+      this.loading && (h("div", { class: "file-viewer-image__spinner" },
+        h("flip-spinner", null)))));
+  }
+  static get is() { return "flip-file-viewer-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-image.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-image.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"File could not be loaded.\""
+    },
+    "file": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "error": {},
+    "loading": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "file",
+      "methodName": "watchFile"
+    }]; }
+}
+//# sourceMappingURL=flip-file-viewer-image.js.map

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-image/flip-file-viewer-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-image.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-image/flip-file-viewer-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,mBAAmB;EALhC;IAMU,gBAAW,GAAY,EAAE,CAAC;IAC1B,iBAAY,GAAY,2BAA2B,CAAC;IAInD,YAAO,GAAY,IAAI,CAAC;IAQzB,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;MAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC,CAAC;GA0BH;EAvCC,SAAS;IACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAYD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC5B,IAAI,CAAC,KAAK,IAAI,CACb,yBACE,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,IAAI,CAAC,YAAY,GACP,CACtB;MACD,WACE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,IAAI,GACd;MACD,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAC,4BAA4B;QACrC,uBAA6B,CACzB,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-image.css\",\n  tag: \"flip-file-viewer-image\",\n})\nexport class FlipFileViewerImage {\n  @Prop() description?: string = \"\";\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n\n  @State() error: boolean;\n  @State() loading: boolean = true;\n\n  @Watch(\"file\")\n  watchFile() {\n    this.error = false;\n    this.loading = true;\n  }\n\n  private onError = () => {\n    this.error = true;\n    this.loading = false;\n  };\n\n  private onLoad = () => {\n    this.error = false;\n    this.loading = false;\n  };\n\n  render() {\n    return (\n      <Host class=\"file-viewer-image\">\n        {this.error && (\n          <flip-inline-error\n            class=\"file-viewer-image__error\"\n            message={this.errorMessage}\n          ></flip-inline-error>\n        )}\n        <img\n          alt={this.description}\n          class=\"file-viewer-image__image\"\n          onError={this.onError}\n          onLoad={this.onLoad}\n          src={this.file}\n        />\n        {this.loading && (\n          <div class=\"file-viewer-image__spinner\">\n            <flip-spinner></flip-spinner>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-pdf/flip-file-viewer-pdf.css

@@ -0,0 +1,143 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-pdf__pages {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  padding: var(--s-space-16);
+}
+
+.file-viewer-pdf__page {
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.file-viewer-pdf__page:not(:last-of-type) {
+    margin-bottom: var(--s-space-8);
+  }
+
+.file-viewer-pdf__canvas {
+  width: 100%;
+  height: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.08);
+}
+
+.file-viewer-pdf__text-container {
+  position: absolute;
+  overflow: hidden;
+  line-height: 1;
+  text-align: initial;
+  inset: 0;
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+          text-size-adjust: none;
+  forced-color-adjust: none;
+}
+
+.file-viewer-pdf__text-container > * {
+    position: absolute;
+    color: transparent;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0% 0%;
+  }
+
+.file-viewer-pdf__text-container > *.markedContent {
+      top: 0;
+      height: 0;
+    }
+
+.file-viewer-pdf__text-container > *.highlight {
+      margin: -1px;
+      padding: 1px;
+      border-radius: 4px;
+      background-color: rgba(180, 0, 170, 1);
+    }
+
+.file-viewer-pdf__text-container > *.highlight.appended {
+      position: initial;
+    }
+
+.file-viewer-pdf__text-container > *.highlight.begin {
+      border-radius: 4px 0 0 4px;
+    }
+
+.file-viewer-pdf__text-container > *.highlight.end {
+      border-radius: 0 4px 4px 0;
+    }
+
+.file-viewer-pdf__text-container > *.highlight.middle {
+      border-radius: 0;
+    }
+
+.file-viewer-pdf__text-container > *.highlight.selected {
+      background-color: rgba(0, 100, 0, 1);
+    }
+
+.file-viewer-pdf__text-container > *.endOfContent {
+      position: absolute;
+      z-index: -1;
+      top: 100%;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      cursor: default;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
+
+.file-viewer-pdf__text-container > *.endOfContent.active {
+      top: 0;
+    }
+
+.file-viewer-pdf__text-container > br::-moz-selection {
+      background: transparent;
+    }
+
+.file-viewer-pdf__text-container > br::selection {
+      background: transparent;
+    }
+
+.file-viewer-pdf__spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.file-viewer-pdf__error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.file-viewer-pdf__pagination {
+  position: absolute;
+  bottom: var(--s-space-32);
+  left: 50%;
+  padding: var(--s-space-4) var(--s-space-12);
+  border-radius: var(--s-border-radius-base);
+  color: var(--s-text-on-image);
+  background-color: rgba(0, 0, 0, 0.6);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  transform: translateX(-50%);
+  pointer-events: none;
+}

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-pdf/flip-file-viewer-pdf.js

@@ -0,0 +1,299 @@
+import { Component, Element, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
+import pdf, { getDocument, renderTextLayer, } from "pdfjs-dist/legacy/build/pdf.js";
+import { getVisibleHeight } from "../../../../utils";
+pdf.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.js";
+export class FlipFileViewerPdf {
+  constructor() {
+    this.errorMessage = "File could not be loaded.";
+    this.zoom = 1;
+    this.loading = true;
+    this.visiblePages = [];
+    this.pages = [];
+    this.renderedPages = [];
+    this.renderingPageNumbers = [];
+    this.onScroll = () => {
+      this.updateVisiblePages();
+    };
+  }
+  async componentWillLoad() {
+    await this.getPages();
+  }
+  async componentDidLoad() {
+    await this.updateVisiblePages();
+  }
+  async onWindowResize() {
+    this.visiblePages = [];
+    this.renderedPages = [];
+    await this.updateVisiblePages();
+  }
+  async watchProps() {
+    await this.getPages();
+    await this.updateVisiblePages();
+  }
+  /**
+   * Print the file.
+   */
+  async print() {
+    this.loading = true;
+    await this.updateVisiblePages(true);
+    await this.openPrintDialog();
+    this.loading = false;
+  }
+  async getPages() {
+    this.error = false;
+    this.loading = true;
+    try {
+      this.doc = await getDocument(this.file).promise;
+      for (let i = 1; i <= this.doc.numPages; i++) {
+        const page = await this.doc.getPage(i);
+        this.pages[i] = page;
+      }
+      this.loading = false;
+    }
+    catch (e) {
+      this.error = true;
+      this.loading = false;
+    }
+  }
+  async renderVisiblePages(forPrint) {
+    const canvases = Array.from(this.el.shadowRoot.querySelectorAll("canvas"));
+    const renderedPages = [];
+    for (const canvas of canvases) {
+      const container = canvas.closest(".file-viewer-pdf__page");
+      const textContainer = container === null || container === void 0 ? void 0 : container.querySelector(".file-viewer-pdf__text-container");
+      const page = this.pages.find((page) => (page === null || page === void 0 ? void 0 : page.pageNumber) === +(container === null || container === void 0 ? void 0 : container.dataset.pageNumber));
+      if (!Boolean(page) ||
+        !this.visiblePages.includes(page.pageNumber) ||
+        this.renderingPageNumbers.includes(page.pageNumber)) {
+        continue;
+      }
+      if (this.renderedPages.includes(page.pageNumber) && !forPrint) {
+        renderedPages.push(page.pageNumber);
+        continue;
+      }
+      this.renderingPageNumbers = [
+        ...this.renderingPageNumbers,
+        page.pageNumber,
+      ];
+      const scale = forPrint ? 4 : this.getScale(page);
+      const viewport = page.getViewport({
+        scale,
+      });
+      const context = canvas.getContext("2d");
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      const renderContext = {
+        canvasContext: context,
+        viewport: viewport,
+      };
+      await page.render(renderContext).promise;
+      this.renderTextLayer(page, textContainer);
+      renderedPages.push(page.pageNumber);
+      this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
+    }
+    this.renderedPages = renderedPages;
+  }
+  async updateVisiblePages(forPrint) {
+    const pages = Array.from(this.el.shadowRoot.querySelectorAll(".file-viewer-pdf__page"));
+    let visiblePages = forPrint
+      ? pages.map((page) => +page.dataset.pageNumber)
+      : pages
+        .filter((page) => getVisibleHeight(page, this.scrollContainer) > 0)
+        .map((page) => +page.dataset.pageNumber);
+    if (visiblePages.length === 0) {
+      visiblePages = [1, 2, 3, 4];
+    }
+    const visiblePagesDidNotChanged = this.visiblePages.length === visiblePages.length &&
+      this.visiblePages.every((pageNumber) => visiblePages.includes(pageNumber));
+    if (visiblePagesDidNotChanged) {
+      return;
+    }
+    this.visiblePages = visiblePages;
+    await this.renderVisiblePages(forPrint);
+  }
+  async renderTextLayer(page, container) {
+    renderTextLayer({
+      container,
+      textContent: await page.getTextContent(),
+      viewport: page.getViewport({
+        scale: this.zoom === "auto" ? this.getScale(page) : this.getScale(page) / 2,
+      }),
+    });
+  }
+  async openPrintDialog() {
+    const canvases = Array.from(this.scrollContainer.querySelectorAll("canvas"));
+    let styles = `
+      *, *:before, *:after {
+        margin: 0;
+        padding: 0;
+      }
+
+      img {
+        display: block;
+        width: 100%;
+      }
+      `;
+    let html = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${this.file}</title>
+        <style>${styles}</style>
+      </head>
+      <body>
+    `;
+    for (const canvas of canvases) {
+      html += `<img src="${canvas.toDataURL()}">`;
+    }
+    html += `
+      </body>
+      </html>
+    `;
+    const win = window.open(" ");
+    win.document.write(html);
+    win.document.close();
+    win.focus();
+    await new Promise((resolve) => setTimeout(resolve));
+    win.print();
+    win.close();
+  }
+  getScale(page) {
+    var _a;
+    return this.zoom === "auto"
+      ? (((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.clientWidth) - 32) / page.view[2]
+      : isNaN(this.zoom)
+        ? 2
+        : this.zoom * 2;
+  }
+  render() {
+    const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
+    const showSpinner = this.loading;
+    return (h(Host, { class: "file-viewer-pdf" },
+      this.error && (h("flip-inline-error", { class: "file-viewer-pdf__error", message: this.errorMessage })),
+      h("div", { "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
+        const viewport = page.getViewport({
+          scale: this.getScale(page) / 2,
+        });
+        return (h("div", { "aria-label": page.pageNumber, class: "file-viewer-pdf__page", "data-page-number": page.pageNumber, id: `page-${page.pageNumber}`, key: page.pageNumber, role: "region", style: {
+            width: this.zoom === "auto" ? undefined : `${viewport.width}px`,
+            height: this.zoom === "auto" ? undefined : `${viewport.height}px`,
+          }, tabIndex: 0 },
+          h("canvas", { class: "file-viewer-pdf__canvas" }),
+          h("div", { class: "file-viewer-pdf__text-container" })));
+      })),
+      showPagination && (h("span", { class: "file-viewer-pdf__pagination", id: "pagination" },
+        h("span", { "aria-current": "page" }, this.visiblePages[0]),
+        " /",
+        " ",
+        this.doc.numPages)),
+      showSpinner && (h("div", { class: "file-viewer-pdf__spinner" },
+        h("flip-spinner", null)))));
+  }
+  static get is() { return "flip-file-viewer-pdf"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-pdf.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-pdf.css"]
+  }; }
+  static get properties() { return {
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"File could not be loaded.\""
+    },
+    "file": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file",
+      "reflect": false
+    },
+    "zoom": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipFileViewerPdfZoom",
+        "resolved": "\"auto\" | number",
+        "references": {
+          "FlipFileViewerPdfZoom": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "zoom",
+      "reflect": false,
+      "defaultValue": "1"
+    }
+  }; }
+  static get states() { return {
+    "doc": {},
+    "error": {},
+    "loading": {},
+    "visiblePages": {}
+  }; }
+  static get methods() { return {
+    "print": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Print the file.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "file",
+      "methodName": "watchProps"
+    }]; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}
+//# sourceMappingURL=flip-file-viewer-pdf.js.map

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-pdf/flip-file-viewer-pdf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-pdf.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-pdf/flip-file-viewer-pdf.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport pdf, {\n  getDocument,\n  PDFDocumentProxy,\n  PDFPageProxy,\n  renderTextLayer,\n} from \"pdfjs-dist/legacy/build/pdf.js\";\nimport { getVisibleHeight } from \"../../../../utils\";\n\npdf.GlobalWorkerOptions.workerSrc = \"/pdfjs/pdf.worker.min.js\";\n\nexport type FlipFileViewerPdfZoom = number | \"auto\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-pdf.css\",\n  tag: \"flip-file-viewer-pdf\",\n})\nexport class FlipFileViewerPdf {\n  @Element() el: HTMLElement;\n\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n  @Prop() zoom?: FlipFileViewerPdfZoom = 1;\n\n  @State() doc: PDFDocumentProxy;\n  @State() error: boolean;\n  @State() loading: boolean = true;\n  @State() visiblePages: number[] = [];\n\n  private pages: PDFPageProxy[] = [];\n  private renderedPages: number[] = [];\n  private renderingPageNumbers: number[] = [];\n  private scrollContainer: HTMLDivElement;\n\n  async componentWillLoad() {\n    await this.getPages();\n  }\n\n  async componentDidLoad() {\n    await this.updateVisiblePages();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  async onWindowResize() {\n    this.visiblePages = [];\n    this.renderedPages = [];\n    await this.updateVisiblePages();\n  }\n\n  @Watch(\"file\")\n  async watchProps() {\n    await this.getPages();\n    await this.updateVisiblePages();\n  }\n\n  /**\n   * Print the file.\n   */\n  @Method()\n  async print() {\n    this.loading = true;\n\n    await this.updateVisiblePages(true);\n    await this.openPrintDialog();\n\n    this.loading = false;\n  }\n\n  private async getPages() {\n    this.error = false;\n    this.loading = true;\n\n    try {\n      this.doc = await getDocument(this.file).promise;\n\n      for (let i = 1; i <= this.doc.numPages; i++) {\n        const page = await this.doc.getPage(i);\n        this.pages[i] = page;\n      }\n\n      this.loading = false;\n    } catch (e) {\n      this.error = true;\n      this.loading = false;\n    }\n  }\n\n  private async renderVisiblePages(forPrint?: boolean) {\n    const canvases = Array.from(this.el.shadowRoot.querySelectorAll(\"canvas\"));\n    const renderedPages = [];\n\n    for (const canvas of canvases) {\n      const container = canvas.closest<HTMLDivElement>(\n        \".file-viewer-pdf__page\"\n      );\n\n      const textContainer = container?.querySelector<HTMLDivElement>(\n        \".file-viewer-pdf__text-container\"\n      );\n\n      const page = this.pages.find(\n        (page) => page?.pageNumber === +container?.dataset.pageNumber\n      );\n\n      if (\n        !Boolean(page) ||\n        !this.visiblePages.includes(page.pageNumber) ||\n        this.renderingPageNumbers.includes(page.pageNumber)\n      ) {\n        continue;\n      }\n\n      if (this.renderedPages.includes(page.pageNumber) && !forPrint) {\n        renderedPages.push(page.pageNumber);\n        continue;\n      }\n\n      this.renderingPageNumbers = [\n        ...this.renderingPageNumbers,\n        page.pageNumber,\n      ];\n\n      const scale = forPrint ? 4 : this.getScale(page);\n\n      const viewport = page.getViewport({\n        scale,\n      });\n\n      const context = canvas.getContext(\"2d\");\n\n      canvas.height = viewport.height;\n      canvas.width = viewport.width;\n\n      const renderContext = {\n        canvasContext: context,\n        viewport: viewport,\n      };\n\n      await page.render(renderContext).promise;\n\n      this.renderTextLayer(page, textContainer);\n\n      renderedPages.push(page.pageNumber);\n\n      this.renderingPageNumbers = this.renderingPageNumbers.filter(\n        (pageNumber) => pageNumber !== page.pageNumber\n      );\n    }\n\n    this.renderedPages = renderedPages;\n  }\n\n  private async updateVisiblePages(forPrint?: boolean) {\n    const pages = Array.from(\n      this.el.shadowRoot.querySelectorAll<HTMLDivElement>(\n        \".file-viewer-pdf__page\"\n      )\n    );\n\n    let visiblePages = forPrint\n      ? pages.map((page) => +page.dataset.pageNumber)\n      : pages\n          .filter((page) => getVisibleHeight(page, this.scrollContainer) > 0)\n          .map((page) => +page.dataset.pageNumber);\n\n    if (visiblePages.length === 0) {\n      visiblePages = [1, 2, 3, 4];\n    }\n\n    const visiblePagesDidNotChanged =\n      this.visiblePages.length === visiblePages.length &&\n      this.visiblePages.every((pageNumber) =>\n        visiblePages.includes(pageNumber)\n      );\n\n    if (visiblePagesDidNotChanged) {\n      return;\n    }\n\n    this.visiblePages = visiblePages;\n\n    await this.renderVisiblePages(forPrint);\n  }\n\n  private async renderTextLayer(page: PDFPageProxy, container: HTMLElement) {\n    renderTextLayer({\n      container,\n      textContent: await page.getTextContent(),\n      viewport: page.getViewport({\n        scale:\n          this.zoom === \"auto\" ? this.getScale(page) : this.getScale(page) / 2,\n      }),\n    });\n  }\n\n  private async openPrintDialog() {\n    const canvases = Array.from(\n      this.scrollContainer.querySelectorAll(\"canvas\")\n    );\n\n    let styles = `\n      *, *:before, *:after {\n        margin: 0;\n        padding: 0;\n      }\n\n      img {\n        display: block;\n        width: 100%;\n      }\n      `;\n\n    let html = `\n      <!DOCTYPE html>\n      <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>${this.file}</title>\n        <style>${styles}</style>\n      </head>\n      <body>\n    `;\n\n    for (const canvas of canvases) {\n      html += `<img src=\"${canvas.toDataURL()}\">`;\n    }\n\n    html += `\n      </body>\n      </html>\n    `;\n\n    const win = window.open(\" \");\n\n    win.document.write(html);\n    win.document.close();\n    win.focus();\n\n    await new Promise((resolve) => setTimeout(resolve));\n\n    win.print();\n    win.close();\n  }\n\n  private getScale(page: PDFPageProxy) {\n    return this.zoom === \"auto\"\n      ? (this.scrollContainer?.clientWidth - 32) / page.view[2]\n      : isNaN(this.zoom)\n      ? 2\n      : this.zoom * 2;\n  }\n\n  private onScroll = () => {\n    this.updateVisiblePages();\n  };\n\n  render() {\n    const showPagination =\n      !this.error && !this.loading && this.visiblePages.length > 0;\n\n    const showSpinner = this.loading;\n\n    return (\n      <Host class=\"file-viewer-pdf\">\n        {this.error && (\n          <flip-inline-error\n            class=\"file-viewer-pdf__error\"\n            message={this.errorMessage}\n          ></flip-inline-error>\n        )}\n        <div\n          aria-describedby=\"pagination\"\n          class=\"file-viewer-pdf__pages\"\n          onScroll={this.onScroll}\n          ref={(el) => (this.scrollContainer = el)}\n        >\n          {this.pages.map((page) => {\n            const viewport = page.getViewport({\n              scale: this.getScale(page) / 2,\n            });\n\n            return (\n              <div\n                aria-label={page.pageNumber}\n                class=\"file-viewer-pdf__page\"\n                data-page-number={page.pageNumber}\n                id={`page-${page.pageNumber}`}\n                key={page.pageNumber}\n                role=\"region\"\n                style={{\n                  width:\n                    this.zoom === \"auto\" ? undefined : `${viewport.width}px`,\n                  height:\n                    this.zoom === \"auto\" ? undefined : `${viewport.height}px`,\n                }}\n                tabIndex={0}\n              >\n                <canvas class=\"file-viewer-pdf__canvas\"></canvas>\n                <div class=\"file-viewer-pdf__text-container\"></div>\n              </div>\n            );\n          })}\n        </div>\n        {showPagination && (\n          <span class=\"file-viewer-pdf__pagination\" id=\"pagination\">\n            <span aria-current=\"page\">{this.visiblePages[0]}</span> /{\" \"}\n            {this.doc.numPages}\n          </span>\n        )}\n        {showSpinner && (\n          <div class=\"file-viewer-pdf__spinner\">\n            <flip-spinner></flip-spinner>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-text/flip-file-viewer-text.css

@@ -0,0 +1,35 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  max-height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-text__text {
+  overflow: auto;
+  width: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: var(--s-font-family-code);
+}
+
+.file-viewer-text__spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.file-viewer-text__error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}