@getflip/swirl-components 0.1.0 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer.js","sourceRoot":"","sources":["../../../../src/components/flip-file-viewer/flip-file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Method, Prop } from \"@stencil/core\";\nimport { saveAs } from \"file-saver\";\nimport { FlipFileViewerPdfZoom } from \"./viewers/flip-file-viewer-pdf/flip-file-viewer-pdf\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer.css\",\n  tag: \"flip-file-viewer\",\n})\nexport class FlipFileViewer {\n  @Prop() description?: string;\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n  @Prop() type!: string;\n  @Prop() typeUnsupportedMessage?: string = \"File type is not supported.\";\n  @Prop() zoom?: FlipFileViewerPdfZoom = 1;\n\n  private viewer: HTMLElement;\n\n  /**\n   * Download the file.\n   */\n  @Method()\n  async download() {\n    const fileName = this.file.split(\"/\").pop();\n\n    saveAs(this.file, fileName);\n  }\n\n  /**\n   * Print the file. Applicable to PDFs only.\n   */\n  @Method()\n  async print() {\n    if (this.type === \"application/pdf\") {\n      (this.viewer as HTMLFlipFileViewerPdfElement).print();\n    }\n  }\n\n  render() {\n    const unsupportedType =\n      !Boolean(this.type) ||\n      (!this.type.startsWith(\"image/\") &&\n        !this.type.startsWith(\"video/\") &&\n        !this.type.startsWith(\"audio/\") &&\n        this.type !== \"text/plain\" &&\n        this.type !== \"text/csv\" &&\n        this.type !== \"application/pdf\");\n\n    return (\n      <Host>\n        <div class=\"file-viewer\">\n          {this.type && (\n            <div class=\"file-viewer__file\">\n              {/* images */}\n              {this.type.startsWith(\"image/\") && (\n                <flip-file-viewer-image\n                  description={this.description}\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-image>\n              )}\n\n              {/* text files */}\n              {this.type === \"text/plain\" && (\n                <flip-file-viewer-text\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-text>\n              )}\n\n              {/* csv files */}\n              {this.type === \"text/csv\" && (\n                <flip-file-viewer-csv\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-csv>\n              )}\n\n              {/* pdf files */}\n              {this.type === \"application/pdf\" && (\n                <flip-file-viewer-pdf\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  zoom={this.zoom}\n                ></flip-file-viewer-pdf>\n              )}\n\n              {/* video files */}\n              {this.type.startsWith(\"video/\") && (\n                <flip-file-viewer-video\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-video>\n              )}\n\n              {/* audio files */}\n              {this.type.startsWith(\"audio/\") && (\n                <flip-file-viewer-audio\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-audio>\n              )}\n\n              {unsupportedType && (\n                <flip-inline-error\n                  message={this.typeUnsupportedMessage}\n                ></flip-inline-error>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-file-viewer/flip-file-viewer.stories.js

@@ -0,0 +1,53 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-file-viewer.mdx";
+export default {
+  argTypes: {
+    file: {
+      control: { type: "text" },
+    },
+    zoom: {
+      control: { type: "text" },
+      description: "Applicable to PDFs only.",
+    },
+  },
+  component: "flip-file-viewer",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFileViewer",
+};
+const Template = (args) => {
+  const container = document.createElement("flip-stack");
+  container.spacing = "24";
+  const element = generateStoryElement("flip-file-viewer", args);
+  element.style.height = "clamp(400px, 90vh, 700px)";
+  const tools = document.createElement("flip-stack");
+  tools.orientation = "horizontal";
+  tools.spacing = "8";
+  const printButton = document.createElement("flip-button");
+  printButton.setAttribute("label", "Print");
+  printButton.addEventListener("click", () => {
+    element.print();
+  });
+  const downloadButton = document.createElement("flip-button");
+  downloadButton.setAttribute("label", "Download");
+  downloadButton.addEventListener("click", () => {
+    element.download();
+  });
+  if (args.type === "application/pdf") {
+    tools.append("\n    ", printButton, "\n    ", downloadButton, "\n  ");
+  }
+  else {
+    tools.append("\n    ", downloadButton, "\n  ");
+  }
+  container.append("\n  ", element, "\n  ", tools, "\n");
+  return container;
+};
+export const FlipFileViewer = Template.bind({});
+FlipFileViewer.args = {
+  file: "/sample.pdf",
+  type: "application/pdf",
+};
+//# sourceMappingURL=flip-file-viewer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-file-viewer/flip-file-viewer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;MACzB,WAAW,EAAE,0BAA0B;KACxC;GACF;EACD,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EACvD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;EAEzB,MAAM,OAAO,GAAG,oBAAoB,CAClC,kBAAkB,EAClB,IAAI,CACwB,CAAC;EAE/B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,2BAA2B,CAAC;EAEnD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EACnD,KAAK,CAAC,WAAW,GAAG,YAAY,CAAC;EACjC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EAEpB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAC1D,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAC3C,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACzC,OAAO,CAAC,KAAK,EAAE,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAC7D,cAAc,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;EACjD,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC5C,OAAO,CAAC,QAAQ,EAAE,CAAC;EACrB,CAAC,CAAC,CAAC;EAEH,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,EAAE;IACnC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;GACvE;OAAM;IACL,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;GAChD;EAED,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;EAEvD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,IAAI,EAAE,aAAa;EACnB,IAAI,EAAE,iBAAiB;CACxB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-file-viewer.mdx\";\n\nexport default {\n  argTypes: {\n    file: {\n      control: { type: \"text\" },\n    },\n    zoom: {\n      control: { type: \"text\" },\n      description: \"Applicable to PDFs only.\",\n    },\n  },\n  component: \"flip-file-viewer\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFileViewer\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"flip-stack\");\n  container.spacing = \"24\";\n\n  const element = generateStoryElement(\n    \"flip-file-viewer\",\n    args\n  ) as HTMLFlipFileViewerElement;\n\n  element.style.height = \"clamp(400px, 90vh, 700px)\";\n\n  const tools = document.createElement(\"flip-stack\");\n  tools.orientation = \"horizontal\";\n  tools.spacing = \"8\";\n\n  const printButton = document.createElement(\"flip-button\");\n  printButton.setAttribute(\"label\", \"Print\");\n  printButton.addEventListener(\"click\", () => {\n    element.print();\n  });\n\n  const downloadButton = document.createElement(\"flip-button\");\n  downloadButton.setAttribute(\"label\", \"Download\");\n  downloadButton.addEventListener(\"click\", () => {\n    element.download();\n  });\n\n  if (args.type === \"application/pdf\") {\n    tools.append(\"\\n    \", printButton, \"\\n    \", downloadButton, \"\\n  \");\n  } else {\n    tools.append(\"\\n    \", downloadButton, \"\\n  \");\n  }\n\n  container.append(\"\\n  \", element, \"\\n  \", tools, \"\\n\");\n\n  return container;\n};\n\nexport const FlipFileViewer = Template.bind({});\n\nFlipFileViewer.args = {\n  file: \"/sample.pdf\",\n  type: \"application/pdf\",\n};\n"]}

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

@@ -0,0 +1,14 @@
+:host {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-audio__audio {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,53 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipFileViewerAudio {
+  render() {
+    return (h(Host, { class: "file-viewer-audio" },
+      h("audio", { class: "file-viewer-audio__audio", controls: true },
+        h("source", { src: this.file, type: this.type }))));
+  }
+  static get is() { return "flip-file-viewer-audio"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-audio.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-audio.css"]
+  }; }
+  static get properties() { return {
+    "file": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-file-viewer-audio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-audio.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-audio/flip-file-viewer-audio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;EAI9B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC7B,aAAO,KAAK,EAAC,0BAA0B,EAAC,QAAQ;QAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAW,CAC5C,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-audio.css\",\n  tag: \"flip-file-viewer-audio\",\n})\nexport class FlipFileViewerAudio {\n  @Prop() file!: string;\n  @Prop() type!: string;\n\n  render() {\n    return (\n      <Host class=\"file-viewer-audio\">\n        <audio class=\"file-viewer-audio__audio\" controls>\n          <source src={this.file} type={this.type}></source>\n        </audio>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,43 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  max-height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-csv__csv {
+  overflow: auto;
+  width: 100%;
+  max-height: 100%;
+}
+
+.file-viewer-csv__table {
+  margin-right: auto;
+  margin-left: auto;
+  border-collapse: collapse;
+}
+
+.file-viewer-csv__cell {
+  padding: var(--s-space-8);
+  border: var(--s-border-width-default) solid var(--s-border-default);
+}
+
+.file-viewer-csv__spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.file-viewer-csv__error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}

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

@@ -0,0 +1,99 @@
+import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
+import { parse } from "papaparse";
+export class FlipFileViewerCsv {
+  constructor() {
+    this.errorMessage = "File could not be loaded.";
+  }
+  componentWillLoad() {
+    this.updateTable();
+  }
+  async updateTable() {
+    var _a;
+    this.error = false;
+    this.loading = true;
+    try {
+      const response = await fetch(this.file);
+      const parsed = parse(await response.text(), {
+        dynamicTyping: true,
+        fastMode: false,
+        skipEmptyLines: true,
+      });
+      if (((_a = parsed.errors) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        this.error = true;
+        this.loading = false;
+        return;
+      }
+      this.data = parsed.data;
+      this.loading = false;
+    }
+    catch (e) {
+      this.loading = false;
+      this.error = true;
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "file-viewer-csv" },
+      this.error && (h("flip-inline-error", { class: "file-viewer-csv__error", message: this.errorMessage })),
+      h("div", { class: "file-viewer-csv__csv", tabIndex: 0 },
+        h("table", { class: "file-viewer-csv__table" },
+          h("tbody", null, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))),
+      this.loading && (h("div", { class: "file-viewer-csv__spinner" },
+        h("flip-spinner", null)))));
+  }
+  static get is() { return "flip-file-viewer-csv"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-csv.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-csv.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
+    }
+  }; }
+  static get states() { return {
+    "data": {},
+    "error": {},
+    "loading": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "file",
+      "methodName": "updateTable"
+    }]; }
+}
+//# sourceMappingURL=flip-file-viewer-csv.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-csv.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-csv/flip-file-viewer-csv.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAOlC,MAAM,OAAO,iBAAiB;EAL9B;IAMU,iBAAY,GAAY,2BAA2B,CAAC;GA2E7D;EApEC,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAGD,KAAK,CAAC,WAAW;;IACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAExC,MAAM,MAAM,GAAG,KAAK,CAAW,MAAM,QAAQ,CAAC,IAAI,EAAE,EAAE;QACpD,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,KAAK;QACf,cAAc,EAAE,IAAI;OACrB,CAAC,CAAC;MAEH,IAAI,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,EAAE;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,OAAO;OACR;MAED,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;MAExB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAAC,OAAO,CAAC,EAAE;MACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;EACH,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB;MAC1B,IAAI,CAAC,KAAK,IAAI,CACb,yBACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,GACP,CACtB;MACD,WAAK,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAE,CAAC;QAC3C,aAAO,KAAK,EAAC,wBAAwB;UACnC,iBACG,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,UAAI,KAAK,EAAC,sBAAsB,EAAC,GAAG,EAAE,OAAO,KAAK,EAAE,IACjD,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,UACE,KAAK,EAAC,uBAAuB,EAC7B,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,EAAE,IAExB,IAAI,CACF,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACJ;MACL,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAC,0BAA0B;QACnC,uBAA6B,CACzB,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { parse } from \"papaparse\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-csv.css\",\n  tag: \"flip-file-viewer-csv\",\n})\nexport class FlipFileViewerCsv {\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n\n  @State() data: (boolean | number | string)[][];\n  @State() error: boolean;\n  @State() loading: boolean;\n\n  componentWillLoad() {\n    this.updateTable();\n  }\n\n  @Watch(\"file\")\n  async updateTable() {\n    this.error = false;\n    this.loading = true;\n\n    try {\n      const response = await fetch(this.file);\n\n      const parsed = parse<string[]>(await response.text(), {\n        dynamicTyping: true,\n        fastMode: false,\n        skipEmptyLines: true,\n      });\n\n      if (parsed.errors?.length > 0) {\n        this.error = true;\n        this.loading = false;\n        return;\n      }\n\n      this.data = parsed.data;\n\n      this.loading = false;\n    } catch (e) {\n      this.loading = false;\n      this.error = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"file-viewer-csv\">\n        {this.error && (\n          <flip-inline-error\n            class=\"file-viewer-csv__error\"\n            message={this.errorMessage}\n          ></flip-inline-error>\n        )}\n        <div class=\"file-viewer-csv__csv\" tabIndex={0}>\n          <table class=\"file-viewer-csv__table\">\n            <tbody>\n              {this.data?.map((row, index) => (\n                <tr class=\"file-viewer-csv__row\" key={`row-${index}`}>\n                  {row.map((cell, i) => (\n                    <td\n                      class=\"file-viewer-csv__cell\"\n                      key={`cell-${index}-${i}`}\n                    >\n                      {cell}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n        {this.loading && (\n          <div class=\"file-viewer-csv__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-image/flip-file-viewer-image.css

@@ -0,0 +1,31 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  max-height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-image__image {
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.file-viewer-image__spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.file-viewer-image__error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}

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;
+}